Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to dynamically change a WPF control's template using a checkbox?

I have an error dialog (shown simplified below).

I display the Report object in a ContentControl to which I have defined a Template simpleErrorTemplate.

There is a CheckBox on the Window that I would like to use to change the template to/from detailedErrorTemplate. What is the best way to achieve this?

<Window x:Class="Core.ErrorDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>

        <ControlTemplate x:Key="simpleErrorTemplate">
            <TextBox Margin="10,10,10,5" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Text="{Binding Message}" />
        </ControlTemplate>

        <ControlTemplate x:Key="detailedErrorTemplate">
            <TextBox Margin="10,10,10,5" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Text="{Binding Message}" />
            <TextBox Margin="10,10,10,5" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Text="{Binding Details}" />
            <TextBox Margin="10,10,10,5" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Text="{Binding StackTrace}" />
        </ControlTemplate>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />         
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <ContentControl Grid.Row="0" Template="{StaticResource simpleErrorTemplate}" DataContext="{Binding Report}"/>

        <CheckBox Margin="10,0,0,0" Grid.Row="1" x:Name="ChkShowDetails">Show Details</CheckBox>            
    </Grid>
</Window>
like image 368
chillitom Avatar asked Mar 04 '11 09:03

chillitom


People also ask

How do I edit a WPF control template?

Right-click the desired control and select Edit Template in the context menu. Click Edit a Copy as shown in Figure 3. In the Create Style Resource dialog, select one of the following options: To extract the style with the default control template in a specified document with a resource key.

What is difference between a control template and DataTemplate in WPF?

A ControlTemplate will generally only contain TemplateBinding expressions, binding back to the properties on the control itself, while a DataTemplate will contain standard Binding expressions, binding to the properties of its DataContext (the business/domain object or view model).

What is WPF item template?

You use the ItemTemplate to specify the visualization of the data objects. If your ItemsControl is bound to a collection object and you do not provide specific display instructions using a DataTemplate, the resulting UI of each item is a string representation of each object in the underlying collection.


2 Answers

You can use a DataTrigger in the ContentControl Style where you bind to the IsChecked property of the ChkShowDetails CheckBox

<ContentControl Grid.Row="0" DataContext="{Binding Report}">
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <Setter Property="Template"
                    Value="{StaticResource simpleErrorTemplate}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=ChkShowDetails,
                                               Path=IsChecked}"
                             Value="True">
                    <Setter Property="Template"
                            Value="{StaticResource detailedErrorTemplate}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

Update

Complete Xaml example, paste it and try it :)

<Window.Resources>
    <ControlTemplate x:Key="simpleErrorTemplate">
        <TextBox Margin="10,10,10,5" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Text="T1" />
    </ControlTemplate>
    <ControlTemplate x:Key="detailedErrorTemplate">
        <StackPanel>
            <TextBox Margin="10,10,10,5" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Text="T2" />
            <TextBox Margin="10,10,10,5" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Text="T3" />
            <TextBox Margin="10,10,10,5" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Text="T4" />
        </StackPanel>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <ContentControl Grid.Row="0" DataContext="{Binding Report}">
        <ContentControl.Style>
            <Style TargetType="ContentControl">
                <Setter Property="Template"
                        Value="{StaticResource simpleErrorTemplate}"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=ChkShowDetails,
                                                   Path=IsChecked}"
                                 Value="True">
                        <Setter Property="Template"
                                Value="{StaticResource detailedErrorTemplate}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ContentControl.Style>
    </ContentControl>
    <CheckBox Margin="10,0,0,0" Grid.Row="1" x:Name="ChkShowDetails">Show Details</CheckBox>
</Grid>
like image 109
Fredrik Hedblad Avatar answered Sep 24 '22 16:09

Fredrik Hedblad


This Solution is for those who are searching for Template swap. It is simple hope it helps you. Please point out any mistakes.

Just use this code for changing the Template on checkBox Checked Event.

 private void checkBox1_Checked(object sender, RoutedEventArgs e)
    {
        DataTemplate Temp;
        Temp = (DataTemplate)this.FindResource("TemplateYouHaveCreated");
        listView1.ItemTemplate = Temp;
    }

refer this link for more information

http://developingfor.net/2009/01/09/dynamically-switch-wpf-datatemplate/

like image 32
Pradeep Avatar answered Sep 23 '22 16:09

Pradeep