基于 ViewModel 属性 的条件 ControlTemplate
Conditional ControlTemplate based on property of ViewModel
是否可以 "select" 基于视图模型 属性 的不同控件模板?
我有以下用户控件模板:
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<RadioButton
GroupName="DisplayButtons"
Content="{TemplateBinding Content}"/>
</ControlTemplate>
</UserControl.Template>
基于视图模型中的布尔值,我想使用 RadioButton
或 Button
。
我怎样才能做到这一点?
您可以使用 Style
和 DataTrigger
来设置 Template
属性:
<UserControl>
<UserControl.Style>
<Style TargetType="UserControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="UserControl">
<Button Content="Button" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewModelProperty}" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="UserControl">
<RadioButton Content="RadioButton" />
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
</UserControl>
可以针对每种情况使用不同的视图,但这种方法在模板复杂的情况下更有用。
对于当前情况,最简单的方法是使用触发器:
方法一
<UserControl x:Class="Myusercontrolnamespace.Views.Myusercontrol"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" "
mc:Ignorable = "d" Height="auto" Width="auto" >
<UserControl.Resources>
<DataTemplate x:Key="RadioButtontTemplate">
<RadioButton/>
</DataTemplate>
<DataTemplate x:Key="ButtonTemplate">
<Button/>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ContentControl Content="{Binding }">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate" Value="{StaticResource RadioButtontTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsRadioButton}" Value="False">
<Setter Property="ContentTemplate" Value="{StaticResource ButtonTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
</UserControl>
方法二
<UserControl x:Class="Myusercontrolnamespace.Views.Myusercontrol"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" "
mc:Ignorable = "d" Height="auto" Width="auto" >
<UserControl.Resources>
<DataTemplate x:Key="RadioButtontTemplate">
<RadioButton/>
</DataTemplate>
<DataTemplate x:Key="ButtonTemplate">
<Button/>
</DataTemplate>
</UserControl.Resources>
<Grid>
<DataTemplate x:Key="globalControlTemplate">
<ContentControl Content="{Binding }">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate" Value="{StaticResource RadioButtontTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding ConsumerType}" Value="Business">
<Setter Property="ContentTemplate" Value="{StaticResource ButtonTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
<ContentControl Content="{Binding globalControlTemplate}" />
</Grid>
</UserControl>
亲切
是否可以 "select" 基于视图模型 属性 的不同控件模板?
我有以下用户控件模板:
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<RadioButton
GroupName="DisplayButtons"
Content="{TemplateBinding Content}"/>
</ControlTemplate>
</UserControl.Template>
基于视图模型中的布尔值,我想使用 RadioButton
或 Button
。
我怎样才能做到这一点?
您可以使用 Style
和 DataTrigger
来设置 Template
属性:
<UserControl>
<UserControl.Style>
<Style TargetType="UserControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="UserControl">
<Button Content="Button" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewModelProperty}" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="UserControl">
<RadioButton Content="RadioButton" />
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
</UserControl>
可以针对每种情况使用不同的视图,但这种方法在模板复杂的情况下更有用。 对于当前情况,最简单的方法是使用触发器:
方法一
<UserControl x:Class="Myusercontrolnamespace.Views.Myusercontrol"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" "
mc:Ignorable = "d" Height="auto" Width="auto" >
<UserControl.Resources>
<DataTemplate x:Key="RadioButtontTemplate">
<RadioButton/>
</DataTemplate>
<DataTemplate x:Key="ButtonTemplate">
<Button/>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ContentControl Content="{Binding }">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate" Value="{StaticResource RadioButtontTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsRadioButton}" Value="False">
<Setter Property="ContentTemplate" Value="{StaticResource ButtonTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
</UserControl>
方法二
<UserControl x:Class="Myusercontrolnamespace.Views.Myusercontrol"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" "
mc:Ignorable = "d" Height="auto" Width="auto" >
<UserControl.Resources>
<DataTemplate x:Key="RadioButtontTemplate">
<RadioButton/>
</DataTemplate>
<DataTemplate x:Key="ButtonTemplate">
<Button/>
</DataTemplate>
</UserControl.Resources>
<Grid>
<DataTemplate x:Key="globalControlTemplate">
<ContentControl Content="{Binding }">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate" Value="{StaticResource RadioButtontTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding ConsumerType}" Value="Business">
<Setter Property="ContentTemplate" Value="{StaticResource ButtonTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
<ContentControl Content="{Binding globalControlTemplate}" />
</Grid>
</UserControl>
亲切