11月15日
WPF Data Templates Part 3 - Switching Data Templates at Runtime
*Note - Class Definition and sample data used in this example are provided in this previous blog post.
It's a known fact that users like to have options. Sometimes one user is more familiar with the data being displayed than another, and would to see only a summary of the data. New users of the application may prefer to see a more detailed view of the data. WPF makes it easy to define multiple Data Templates and switch them out based on user preference. To do this, you can define Data Templates as resources, and reference them by key to use them. These data templates are defined in Window.Resources:
<DataTemplate x:Key="DetailedTemplate">
<Border BorderBrush="Blue" Margin="3" Padding="3" BorderThickness="2" CornerRadius="5" Background="Beige">
<StackPanel Orientation="Horizontal">
<Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}"> <Image.BitmapEffect>
<DropShadowBitmapEffect />
</Image.BitmapEffect>
</Image>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock FontSize="25" Foreground="Goldenrod" Text="{Binding Path=ImageName}" /> <Label Content="{Binding Path=ImageRating,Converter={StaticResource RatingConverter}}" /> </StackPanel>
</StackPanel>
</Border>
</DataTemplate>
<DataTemplate x:Key="SimpleTemplate">
<Border BorderBrush="Blue" Margin="3" Padding="3" BorderThickness="2" CornerRadius="5" Background="Beige">
<StackPanel HorizontalAlignment="Center">
<Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}"> <Image.BitmapEffect>
<DropShadowBitmapEffect />
</Image.BitmapEffect>
</Image>
</StackPanel>
</Border>
</DataTemplate>
You can set the default Data Template of the list box directly in XAML using its ItemTemplate property and referencing the desired template from resources identified by its key [in this case we are starting out with the summary template defined by the SimpleTemplate key in resources]:
<ListBox x:Name="lbResults" Grid.Row="1" Grid.Column="0" Height="240"
HorizontalContentAlignment="Stretch" ItemsSource="{StaticResource FavoriteImages}" ItemTemplate="{StaticResource SimpleTemplate}" /> Next we'll add buttons to the screen so that the user can toggle the Summary and Detail view of the data being contained by the List Box.
<Button Content="Details" Margin="5,0,0,0" x:Name="btnDetail" Click="btnDetail_Click" />
<Button Content="Summary" Margin="5,0,0,0" x:Name="btnSummary" Click="btnSummary_Click" />
In the code-behind, by reacting to user actions, we can now change the Data Template of the list box by pulling the desired Data Template programmatically from resources and changing the ItemTemplate property value:
private void btnDetail_Click(object sender, RoutedEventArgs e)
{ //pull the detailed template from resources, identified by the DetailedTemplate key
DataTemplate detail = this.FindResource("DetailedTemplate") as DataTemplate; lbResults.ItemTemplate = detail;
}
private void btnSummary_Click(object sender, RoutedEventArgs e)
{ //pull the summary template from resources, identified by the SimpleTemplate key
DataTemplate summary = this.FindResource("SimpleTemplate") as DataTemplate; lbResults.ItemTemplate = summary;
}
Summary Template:
Detailed Template:
Full source code for this sample is available here.
工具 
帮助
