2021-08-24

WPF修改UI模板和实现转换器传递数据

之前没有做过UI界面，现在做wpf的桌面软件，虽然完成了功能，但是被逼着需要修改UI样式，没办法，就学了点修改样式模板和数据转换器，主要是做个图片滤镜功能，本来是需要用tableitem完成的，但是tableitem的head过多之后，点击选中会出现下浮的操作，但是排成多行的head会来回变动，所以后来改成了用listbox，然后修改了listbox的样式

//这两行是设置修改图片和对应的文字
<cnpv:StrToPictureSource x:Key="strPicture"></cnpv:StrToPictureSource>
<cnpv:StrToTextSource x:Key="strText"></cnpv:StrToTextSource>
        <Style x:Key="ImageChangeType" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Margin" Value="3.5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Grid Background="Transparent" Width="68" Height="68">
                            <Border Name="bd"  
                                    BorderThickness="2"
                                    BorderBrush="Transparent"
                                    CornerRadius="0">
                                <StackPanel>
                                    <Image Width="40"
                                       Height="25" 
                                           Margin="0,8,0,0"
                                       Stretch="Fill"
                                       Source="{Binding RelativeSource=
                                    {RelativeSource FindAncestor,AncestorType=ListBoxItem,AncestorLevel=1}
                                    ,Path=Tag,Converter={StaticResource strPicture}}"></Image>
                                    <TextBlock Margin="0,7,0,0" HorizontalAlignment="Center"  Foreground="{StaticResource C3_Brush}" Text="{Binding RelativeSource=
                                    {RelativeSource FindAncestor,AncestorType=ListBoxItem,AncestorLevel=1}
                                    ,Path=Tag,Converter={StaticResource strText}}"></TextBlock>
                                </StackPanel>
                            </Border>
                            
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="false"></Condition>
                                    <Condition Property="IsMouseOver" Value="true"></Condition>
                                </MultiTrigger.Conditions>
                                <Setter Property="BorderBrush" Value="{DynamicResource C10_Brush}" TargetName="bd"></Setter>
                            </MultiTrigger>

                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="BorderBrush" Value="{DynamicResource C1_Brush}" TargetName="bd"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
```csharp
在这里插入代码片

上面是样式的修改

接着下面是需要引入的转换器空间，还有对应的样式目标的控件

xmlns:cnv="clr-namespace:SkyworthEDU.Converters"
xmlns:cnpv="clr-namespace:SkyworthEDU.Converters"


 <ListBox Name="ImageChange"
 Style="{DynamicResource HorizontalListBox}"
 Margin="0,4,0,0"
 Background="Transparent"
ItemContainerStyle="{StaticResource ImageChangeType}"                          SelectionChanged="ImageChange_SelectionChanged"                            PreviewMouseUp="ImageChange_PreviewMouseUp"
PreviewMouseDown="ImageChange_PreviewMouseDown" >
<ListBoxItem Tag="noneStyle" ></ListBoxItem>
 <ListBoxItem Tag="filterImage" > </ListBoxItem>
 <ListBoxItem Tag="grayImage" > </ListBoxItem>
  <ListBoxItem Tag="negaImage" > </ListBoxItem>
 <ListBoxItem Tag="embossmentImage" > <!--</ListBoxItem>雾化保留使用，因为界面UI排版
<ListBoxItem Tag="softenImage" Width="68" >--> </ListBoxItem>
 <ListBoxItem Tag="atomizationImage" > </ListBoxItem>
</ListBox>

然后接下来是转换器，根据listboxitem的tag值来判断listboxitem里面到底是哪张图片和对应的是什么效果

public class StrToPictureSource : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            
            switch (value)
            {
                case "noneStyle":
                    return "pack://application:,,,/SkyworthEDU;component/images/Texture/预览.png";
                case "filterImage":
                    return "pack://application:,,,/SkyworthEDU;component/images/Texture/锐化.png";
                case "grayImage":
                    return "pack://application:,,,/SkyworthEDU;component/images/Texture/黑白.png";
                case "negaImage":
                    return "pack://application:,,,/SkyworthEDU;component/images/Texture/底色.png";
                case "embossmentImage":
                    return "pack://application:,,,/SkyworthEDU;component/images/Texture/浮雕.png";
                case "softenImage":
                    return "pack://application:,,,/SkyworthEDU;component/images/Texture/柔化.png";
                case "atomizationImage":
                    return "pack://application:,,,/SkyworthEDU;component/images/Texture/雾化.png";
                default:

                    break;
            }
            return null;
        }

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

 public class StrToTextSource : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            switch (value)
            {
                case "noneStyle":
                    return "无";
                case "filterImage":
                    return "锐化";
                case "grayImage":
                    return "黑白";
                case "negaImage":
                    return "底色";
                case "embossmentImage":
                    return "浮雕";
                case "softenImage":
                    return "柔化";
                case "atomizationImage":
                    return "雾化";
                default:

                    break;
            }
            return null;
        }

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

最后的效果图如下：