State-Based Navigation w Prism - wyświetlanie informacji w innej postaci

W poprzednim poście omówiłem w jaki sposób można powiadomić użytkownika o zmianie stanu aplikacji. W tym poście pokaże kolejną z technik związanych z State-Based Navigation, tym razem w kontekście wyświetlania danych w różnych formatach.

Przykład oprę na poprzednim projekcie (link), tak więc należy sobie przygotować projekt tylko z zmianą jednego elementu:
Zamiast DataGrid użyjemy ListBox-a.
Kolejnymi zmianami (ale to już ostatnimi) będzie modyfikacja XAML-a - tutaj określimy dwa style:

Code:

<UserControl x:Class="CustomerModule.CustomerListView"
             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"
             xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
             mc:Ignorable="d" >
    <UserControl.Resources>
        <DataTemplate x:Key="ItemStandardTemplate">
            <StackPanel>
                <TextBlock>
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}" >
                            <Binding Path="FirstName" />
                            <Binding Path="LastName" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
            </StackPanel>
        </DataTemplate>
        
        <DataTemplate x:Key="ItemSpecialTemplate">
            <StackPanel Margin="5">
                <Image Source="Images/Person.png" Width="30" Height="30" />
                <TextBlock Text="{Binding EmailAddress}" VerticalAlignment="Center" />
                <TextBlock VerticalAlignment="Center">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}" >
                            <Binding Path="FirstName" />
                            <Binding Path="LastName" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <ToggleButton Content="Zmień styl" Name="btnStyleIndicator" />
        </StackPanel>
        
        <extToolkit:BusyIndicator IsBusy="{Binding IsBusy}" BusyContent="Loading data..." Grid.Row="1">
            <ListBox ItemsSource="{Binding CustomerList, Mode=TwoWay}">
                <ListBox.Style>
                    <Style TargetType="ListBox">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=btnStyleIndicator, Path=IsChecked}" Value="True">
                                <Setter Property="ItemTemplate" Value="{StaticResource ItemSpecialTemplate}" />
                                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
                                <Setter Property="ItemsPanel">
                                    <Setter.Value>
                                        <ItemsPanelTemplate>
                                            <WrapPanel />
                                        </ItemsPanelTemplate>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>

                            <DataTrigger Binding="{Binding ElementName=btnStyleIndicator, Path=IsChecked}" Value="False">
                                <Setter Property="ItemTemplate" Value="{StaticResource ItemStandardTemplate}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.Style>
            </ListBox>
        </extToolkit:BusyIndicator>
    </Grid>
</UserControl>

Deklarujemy dwa style:

• ItemStandartTemplate - standardowy styl kiedy przycisk nie jest wciśnięty
• ItemSpecialTemplate - styl w którym dane są wyświetlane w postaci zdjęcia oraz podpisu pod nim

Poszczególne style prezentują się następująco:
Standardowy:

Specjalny:

Prosta zmiana (nie wymagana była nawet jedna linijka w kodzie C#) a cieszy oko :). Oczywiście można by tutaj podawać ścieżkę do pliku (np. w klasie Customer dodać można pole ImagePath) co sprawiłoby interakcję na najwyższym poziomie.