WPF 控件【B】Button二) ListView控件content/Background等等，可以添加自定义矢量图作为背景：Style+Triggers+VisualBrush+Path

最新推荐文章于 2025-01-22 14:05:47 发布

我爱AI

最新推荐文章于 2025-01-22 14:05:47 发布

阅读量914

点赞数

分类专栏： ---------- 【控件+自定义控件】

本文链接：https://blog.youkuaiyun.com/xpj8888/article/details/83150481

版权

---------- 【控件+自定义控件】专栏收录该内容

20 篇文章

订阅专栏

一、简介

本博客，说明如何Button/Label等控件，如何加载自定义图片做内容，或做背景。

二、Button加载自定矢量图

1、button的content可以加载自定义图片。

效果：有点亮按钮的背景，即边缘有颜色变化。

<Button Height="48" Width="1920" Content="{StaticResource StutasBarBackground}"/>

2、button的Style可以加载自定义图片。

（无点亮按钮的背景，消耗资源大）

 <Button Height="48" Width="1920" Content="{StaticResource StutasBarBackground}" Style="{StaticResource Normal_Button}"/>

其中，Normal_Button：

<Style x:Key="Normal_Button" TargetType="{x:Type Button}">
        --><!--<Setter Property="Width" Value="153"/>
        <Setter Property="Height" Value="60"/>--><!--
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border   Name="border" BorderThickness="0" BorderBrush="Transparent">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="True">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <VisualBrush Visual="{Binding  Path=Content, RelativeSource={RelativeSource TemplatedParent}}"></VisualBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

效果：

三、Label

1、Label的content可以加载自定义图片。

（无点亮按钮的背景，消耗资源小）Label避免Button方式下的多次点击、避免鼠标在Button悬停状态下点亮按钮（因为我不需要点亮功能、点击功能、触发功能）。

 <Label Content="{StaticResource StutasBarBackground}" Height="48" Width="1920"  />

其中，StutasBarBackground表示自定义的图片：

    <Canvas Width="1920" Height="84" x:Key="StutasBarBackground">
        <Rectangle Height="48" Width="1920" Fill="#FFC1C8CE" Margin="0" StrokeThickness="1.5"/>
    </Canvas>

效果：

2、Label背景可以添加虚拟画刷VisualBrush

Label 的background加载（效果最好，可以通过Width或height自适应调整背景，可以给其他不同长度换宽度的Label使用）

<Label Height="70" Width="676" Canvas.Left="0" Canvas.Top="0">
                <Label.Background>
                    <VisualBrush Visual="{StaticResource PublicListx41}"/>
                </Label.Background>
            </Label>

其中，PublicListx41表示放在容器Canvas中的数据.。效果如下：

四、总结

VisualBrush效果最好，既可以达到自己想要的目的，又可以服用背景PublicListx41的数据，也可以降低内存的消耗。

那么，我在触发器中的点击List行的点击事件、选中事件，直接调用了列表的ListViewItemContainerStyle样式，结合了触发器Triggers+虚拟画刷VisualBrush，就可以加载矢量图path数据。

    <!-- Style of ListViewItemContainer for ListView -->
    <Style x:Key="ListViewItemContainerStyle" TargetType="{x:Type ListViewItem}">
        <!-- 字体、字号、字色 -->
        <Setter Property="FontFamily" Value="Microsoft YaHei"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Foreground" Value="#202F3B"/>
        <!-- 行高 -->
        <Setter Property="Height" Value="34"/>
        <Setter Property="MinHeight" Value="34"/>
        <!-- Margin -->
        <Setter Property="Margin" Value="0"/>
        <!-- 对齐 -->
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <!-- 背景 -->
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="3,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border x:Name="Bd" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" Margin="{TemplateBinding Margin}">
                        <!-- 上下item分隔线 -->
                        <Border.BorderBrush>#D1D1D1</Border.BorderBrush>
                        <Border.BorderThickness>0,0,0,0.7</Border.BorderThickness>
                        <Grid x:Name="PART_Root" Margin="{TemplateBinding Padding}">
                            <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <ContentPresenter x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!-- 当item为空 -->
                        <Trigger Property="GridView.ColumnCollection" Value="{x:Null}">
                            <Setter TargetName="contentPresenter" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                            <Setter Property="Background" Value="LightBlue" />
                        </Trigger>

                        <!--当鼠标点击item-->
                        <Trigger Property="IsFocused" Value="True">
                            <Setter TargetName="Bd" Property="Background">
                                <Setter.Value>
                                    <!--<ImageBrush ImageSource="../../Icon/SystemSetPage/Background/病人列表-选择.png"/>-->
                                    <VisualBrush Visual="{StaticResource Public.EmptyButton240x52.Touches.Icon}"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        
                        <!--当item被选中-->
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Bd" Property="Background">
                                <Setter.Value>
                                    <VisualBrush Visual="{StaticResource Public.EmptyButton240x52.Touches.Icon}"/>
                                    <!--<SolidColorBrush Color="#cfcccc"/>-->
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>