<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfDemo" xmlns:Properties="clr-namespace:WpfDemo.Properties" x:Class="WpfDemo.ContentTemplateDemo" mc:Ignorable="d" Title="ContentTemplateDemo" Height="484.833" Width="547.5"> <Window.Resources> <local:carImageConverter x:Key="cc"/> <DataTemplate x:Key="itemView"> <Grid Margin="2" d:DesignWidth="89.5" d:DesignHeight="80.75" Height="82.75" Width="300.834"> <StackPanel Orientation="Horizontal" Margin="2,2,0,1.667" Height="Auto" HorizontalAlignment="Left" Width="243.5"> <Image Width="78.25" Source="{Binding logimg, Converter={StaticResource cc}}" Height="Auto" Stretch="Fill" Margin="5"/> <StackPanel Width="217.75" Margin="0,0,0,0.625"> <Label FontSize="15" Content="{Binding carproducter}" Height="25.167"/> <Label Content="{Binding year}" Height="28.25" Margin="0,0,1.667,0"/> <Label Content="{Binding logimg}" Height="23.833" RenderTransformOrigin="0.5,0.5"> <Label.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="1"/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Label.RenderTransform> </Label> </StackPanel> </StackPanel> </Grid> </DataTemplate> <DataTemplate x:Key="detailView"> <Border CornerRadius="6"> <StackPanel Margin="0,3,0,3.333" Width="292.667"> <Image x:Name="image" Source="{Binding carimg, Converter={StaticResource cc}}" Height="183.333"/> <StackPanel Height="41.334" Margin="0.667,0" Orientation="Horizontal"> <Label x:Name="label" Content="Name:" Width="120.76" VerticalAlignment="Center" HorizontalAlignment="Center"/> <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{Binding carname}" Width="167.463" HorizontalAlignment="Center" VerticalAlignment="Center" IsEnabled="False"/> </StackPanel> <StackPanel Height="38.667" Margin="3.333,0,1.334,0" Orientation="Horizontal"> <Label x:Name="label1" Content="品牌:" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,6.713" Width="38.666" d:LayoutOverrides="TopMargin, BottomMargin"/> <Label x:Name="label2" Content="{Binding carproducter}" Margin="0,9.25,0,5.25"/> <Label x:Name="label3" Content="年份:" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Label x:Name="label4" Content="{Binding year}"/> <Label x:Name="label5" Content="Top Speed: "/> <Label x:Name="label6" Content="{Binding topspeed}"/> </StackPanel> </StackPanel> </Border> </DataTemplate> </Window.Resources> <Grid> <StackPanel Orientation="Horizontal"> <UserControl ContentTemplate="{StaticResource detailView}" Content="{Binding SelectedItem, ElementName=listBox}"/> <ListBox x:Name="listBox" Margin="0,3.833,0,2.5" Width="232.001" ItemTemplate="{StaticResource itemView}"/> </StackPanel> </Grid> </Window>
using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; namespace WpfDemo { /// <summary> /// ContentTemplateDemo.xaml 的互動邏輯 /// </summary> public partial class ContentTemplateDemo : Window { public ContentTemplateDemo() { InitializeComponent(); List<carView> list = new List<carView> { new carView() { logimg="w1", carimg="h1", carproducter="宝马", carname="宝马730L", year=2001, topspeed=300 }, new carView() { logimg="w2", carimg="h2", carproducter="布加迪", carname="布加迪333", year=2011, topspeed=400 }, new carView() { logimg="w3", carimg="h3", carproducter="劳斯莱斯", carname="幻影666", year=2021, topspeed=500 } }; this.listBox.ItemsSource = list; this.listBox.SelectedIndex = 0; } } public class carListItemView { public int year { get; set; } } public class carView { public string carimg { get; set; } public int year { get; set; } public string carname { get; set; } public int topspeed { get; set; } public string logimg { get; set; } public string carproducter { get; set; } } public class carImageConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { string uri = string.Format(@"\pic\{0}.jpeg", value); // var map = new BitmapImage(new Uri(uri, UriKind.Relative)); return uri; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } }