CODEWITHSUNDEEP
c#wpfcontroltemplate
bas
bas

Reputation: 14912

Conditional ControlTemplate based on property of ViewModel

Is it possible to "select" a different control template based on a property of a viewmodel?

I have the following user control template:

<UserControl.Template>
    <ControlTemplate TargetType="UserControl">

        <RadioButton 
            GroupName="DisplayButtons" 
            Content="{TemplateBinding Content}"/>

    </ControlTemplate>
</UserControl.Template>

Based on a boolean in the viewmodel, I want to use either a RadioButton or a Button.

How can I achieve that?

Upvotes: 1

Views: 1622

Answers (2)

LPGTE SOFTS
LPGTE SOFTS

Reputation: 175

It is possible to use different views for each case but this method is more useful in the case of complicated templates. For the current case, the easiest way is to use Triggers:

Method 1

<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>

Method 2

<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>

Cordially

Upvotes: 4

mm8
mm8

Reputation: 169210

You could use a Style with a DataTrigger that sets the Template property:

<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>

Upvotes: 4

Related Questions