WPF ContentTemplate Demo

 

 

<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();
        }
    }

}