深入浅出WPF 第二部分(24)

最新推荐文章于 2023-09-08 20:51:52 发布

原创最新推荐文章于 2023-09-08 20:51:52 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

WPF 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了一种使用WPF创建应用程序的方法，并展示了如何通过数据绑定将对象属性与UI元素连接起来。具体包括两种Converter的实现，即AutoMakerToImageConverter和AutoMakerToLogoPathConverter，用于将汽车制造商名称转换为相应的图片源。

有两种办法可以在XAML代码中使用Converter：

把Converter以资源的形式放在资源字典里。
为Converter准备一个静态属性，形成单件模式，在XAML代码中使用{x:Static}标签扩展来访问。

数据驱动方式实现23中的界面

using System;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace CarWpfApplication_2.Converters
{
    class AutoMakerToImageConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string strUri = string.Format(@"/Resources/Images/{0}.jpg", value.ToString());
            return new BitmapImage(new Uri(strUri, UriKind.Relative));
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

using System;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace CarWpfApplication_2.Converters
{
    class AutoMakerToLogoPathConverter:IValueConverter
    {
        public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string uriStr = string.Format(@"/Resources/Logos/{0} - Copy.jpg", value.ToString());
            return new BitmapImage(new Uri(uriStr, UriKind.Relative));
        }

        public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new System.NotImplementedException();
        }
    }
}

namespace CarWpfApplication.Objects
{
    public class Car
    {
        public string Automaker { get; set; }
        public string Name { get; set; }
        public string Year { get; set; }
        public string TopSpeed { get; set; }
    }
}

<Window x:Class="CarWpfApplication_2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:converters="clr-namespace:CarWpfApplication_2.Converters"
        Title="CarView" Height="380" Width="630" ResizeMode="NoResize">   
    <Window.Resources>
        <!--Converters-->
        <converters:AutoMakerToImageConverter x:Key="imageConverter"/>
        <converters:AutoMakerToLogoPathConverter x:Key="logoConverter"/>
        
        <!--DataTemplate for DetailView-->
        <DataTemplate x:Key="carDetailViewTemplate">
            <StackPanel Orientation="Vertical">
                <Image x:Name="imagePhoto" Width="420" Height="300" Source="{Binding Automaker, Converter={StaticResource ResourceKey=imageConverter}}"/>
                <StackPanel Orientation="Horizontal" Height="30" Margin="5">
                    <StackPanel Orientation="Horizontal" Width="100" >
                        <TextBlock Text="Name:" Margin="5"/>
                        <TextBlock x:Name="carName" Margin="5" Text="{Binding Name}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Width="100">
                        <TextBlock Text="Year:" Margin="5"/>
                        <TextBlock x:Name="carYear" Margin="5" Text="{Binding Year}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Width="100" >
                        <TextBlock Text="AutoMaker:" Margin="5"/>
                        <TextBlock x:Name="autoMaker" Margin="5" Text="{Binding Automaker}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Width="100" >
                        <TextBlock Text="TopSpeed:" Margin="5"/>
                        <TextBlock x:Name="topSpeed" Margin="5" Text="{Binding TopSpeed}"/>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
        
        <!--DataTemplate for Item View-->
        <DataTemplate x:Key="carListItemViewTemplate">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="imageLogo" Grid.RowSpan="3" Width="100" Height="100" Source="{Binding Automaker, Converter={StaticResource ResourceKey=logoConverter}}"/>
                <StackPanel Orientation="Vertical">
                    <TextBlock x:Name="carName" FontWeight="Bold" Margin="10" Text="{Binding Name}"/>
                    <TextBlock x:Name="carYear" FontWeight="Bold" Margin="10" Text="{Binding Year}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    
    <Grid>
        <StackPanel Orientation="Horizontal" Height="470">
            <!--UserControl ContentTemplate-->
            <UserControl ContentTemplate="{StaticResource ResourceKey=carDetailViewTemplate}" Content="{Binding SelectedItem, ElementName=carListBox}"/>
            <ListBox x:Name="carListBox" Width="200" Height="350" Margin="0" VerticalAlignment="Top"  ItemTemplate="{StaticResource ResourceKey=carListItemViewTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
        </StackPanel>
    </Grid>
</Window>

        public MainWindow()
        {
            InitializeComponent();

            List<Car> carList = new List<Car>() 
            {
                new Car(){Automaker="bl", Name="Binli", Year="1900", TopSpeed="340"},
                new Car(){Automaker="fll", Name="Falali", Year="1899", TopSpeed="500"},
                new Car(){Automaker="bsj", Name="Baoshijie", Year="1955", TopSpeed="240"},
                new Car(){Automaker="lsls", Name="Laosilaisi", Year="1966", TopSpeed="340"},
            };

            this.carListBox.ItemsSource = carList;
            this.carListBox.SelectedItem = this.carListBox.Items[0];
        }