WPF的ComboBox选中时改变图片

最新推荐文章于 2024-10-19 12:32:04 发布

原创最新推荐文章于 2024-10-19 12:32:04 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

WPF 专栏收录该内容

64 篇文章

订阅专栏

本文介绍如何在WPF的ComboBox中实现选中时改变图片的效果。通过设置选项模板和触发条件，可以动态绑定不同状态的图片。

在combobox中设置选项模板,并设置触发条件更换绑定即可

                <ComboBox x:Name="BorderTypeComboBox" 
                          Margin="18,0,0,0"
                          Width="68" Height="25" 
                          ItemsSource="{Binding BorderTypes}">
                    <!-- 下拉选项宽度设置 -->
                    <ComboBox.Resources>
                        <Style TargetType="Popup">
                            <Setter Property="Width" Value="1000"/>
                            <Setter Property="MinWidth" Value="154"/>
                        </Style>
                        <Style TargetType="ComboBoxItem">
                            <Setter Property="Width" Value="154"/>
                            <Setter Property="Height" Value="26"/>
                        </Style>
                    </ComboBox.Resources>
                    <!-- 列项模板 -->
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image x:Name="img"  Source="{Binding Img}" Margin="5,0,5,0"  Width="145"  HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
                            </Grid>
                            <DataTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Source" TargetName="img" Value="{Binding SelectedImg}"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="False">
                                    <Setter Property="Source" TargetName="img" Value="{Binding Img}"/>
                                </Trigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

绑定模型项:

    public class BorderType
    {
        public BorderType(string name, string dashArray)
        {
            // 边框属性
            Name = name;
            BorderDashArray = dashArray;
            Img = new BitmapImage(new Uri($"pack://application:,,,/QuJiao;component/Resource/Image/Prepare/Attribute/BorderType/{name}.png"));
            SelectedImg = new BitmapImage(new Uri($"pack://application:,,,/QuJiao;component/Resource/Image/Prepare/Attribute/BorderType/s_{name}.png"));
        }
        // 边框属性
        public string Name { get; set; }
        public BitmapImage Img { get; set; }
        public BitmapImage SelectedImg { get; set; }
        public string BorderDashArray { get; set; }
    }