CODEWITHSUNDEEP
c#wpfmvvmlistbox
TheFaithfulLearner
TheFaithfulLearner

Reputation: 703

Swapping Control Templates

I have a WPF project (C#, Visual Studio 2010, MVVM) and I have a question.

I have, at present, an item template in a ListBox. This looks as follows:

 <ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Thumb Name="myThumb" Template="{StaticResource NodeVisualTemplate}">

                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="DragDelta">
                        <cmd:EventToCommand Command="{Binding ChatNodeListViewModel.DragDeltaCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"/>
                    </i:EventTrigger>

                </i:Interaction.Triggers>
            </Thumb>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

The template is 'NodeVisualTemplate' which is a series of controls (like borders and text boxes).

What I don't know how to do, and what I would like to do, is to be able to swap out that template for another based on properties within that item. In the ListBox each ListBoxItem has a data context which is a 'ChatNodeViewModel'. I was hoping to have a property in that which would dictate which template was used.

Is this possible? If so, how can it be done?

Upvotes: 0

Views: 99

Answers (3)

mm8
mm8

Reputation: 169350

You could use <DataTemplate.Triggers> like this:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Thumb Name="myThumb" Template="{StaticResource NodeVisualTemplate}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="DragDelta">
                        <cmd:EventToCommand Command="{Binding ChatNodeListViewModel.DragDeltaCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Thumb>
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding YourProperty}" Value="1">
                <Setter TargetName="myThumb" Property="Template" Value="{StaticResource NodeVisualTemplateOne}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding YourProperty}" Value="2">
                <Setter TargetName="myThumb" Property="Template" Value="{StaticResource NodeVisualTemplateTwo}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding YourProperty}" Value="3">
                <Setter TargetName="myThumb" Property="Template" Value="{StaticResource NodeVisualTemplateThree}" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ListBox.ItemTemplate>

Upvotes: 1

sTrenat
sTrenat

Reputation: 1049

You could use styled Thumb, with template on DataTrigger, and bind to your property in your ViewModel, i.e YourProperty.

<Thumb>
    <Thumb.Style>
        <Style TargetType="Thumb">
            <Setter Property="Template"  Value="{StaticResource NodeVisualTemplate}"/>
            <!--default Template ^-->
            <Style.Triggers>
                <DataTrigger Binding="{Binding YourProperty}" Value="0">
                    <Setter Property="Template" Value="{StaticResource TemplateOn0}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding YourProperty}" Value="1">
                    <Setter Property="Template" Value="{StaticResource TemplateOn1}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding YourProperty}" Value="2">
                    <Setter Property="Template" Value="{StaticResource TemplateOn2}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Thumb.Style>
</Thumb>

Sample property Implementation:

public int YourProperty {set;get;} = 0;

You could also use some Enum, to easier understand of which template is which, or even string.

If you want to just swap ListBoxItem's template, you could use Listbox's build-in ItemTemplateSelecetor. Here is sample

Upvotes: 1

DNKROZ
DNKROZ

Reputation: 2852

Try using a DataTrigger 

 <DataTrigger Binding="{Binding ElementName=myElement,Path=IsChecked}"
              Value="True">
        <Setter Property="Template"
                Value="{StaticResource myTemplate}"/>
  </DataTrigger>

For example, the above would swap the template if a checkbox is checked

Upvotes: 2

Related Questions