WPF 中的自定义控件背景颜色

Custom Control Background Color in WPF

我已经创建了一个自定义控件,如下所示 (Generic.xaml):

<Style TargetType="{x:Type local:MyCC}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyCC}">
                <Grid Name="grd" Height="{Binding Height}" Width="{Binding Width}">
                    <Rectangle Name="FirstRec" Fill="Blue"/>
                    <Rectangle Name="SecondRec" Fill="Black" Margin="1"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property = "IsMouseOver" Value = "True">
            <Setter Property = "Background" Value = "Red" />
        </Trigger>
    </Style.Triggers>
</Style>

对于 FirstRec 我想获取 CC 的前景色(而不是蓝色),对于 SecondRec 我需要获取背景(而不是黑色)。因此现在触发器无法正常工作!我也不想绑定 Grid 的高度和宽度,因为 CC 有自己的高度和宽度,但我不知道如何使用它!你能帮帮我吗?!

编辑:

其实就是一个有状态的开关。如果 status == 0 它显示一个空的矩形。如果 status == 1 它显示一个填充的矩形。如果状态 == 3 || status == 4 它上面显示了一个红叉。这是抄送:

<Style TargetType="{x:Type local:BreakerCC}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:BreakerCC}">
                <Grid Name="grd" Background="{TemplateBinding Background}" >
                    <Rectangle Name="MainRectangle" StrokeThickness="1" Stroke="{TemplateBinding Foreground}"/>
                    <Path Name="Line1" Stroke="Red" StrokeThickness="1" Stretch="Fill">
                        <Path.Data>
                            <LineGeometry StartPoint="0,0" EndPoint="1,1" />
                        </Path.Data>
                        <Path.Style>
                            <Style TargetType="Path">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x00">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x01">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x02">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x03">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Path.Style>
                    </Path>
                    <Path Name="Line2" Stroke="Red" StrokeThickness="1" Stretch="Fill">
                        <Path.Data>
                            <LineGeometry StartPoint="0,1" EndPoint="1,0" />
                        </Path.Data>
                        <Path.Style>
                            <Style TargetType="Path">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x00">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x01">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x02">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x03">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Path.Style>
                    </Path>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是MainWindow.xaml

中的定义
<Window.Resources>
    <Style x:Key="230KV" TargetType="Control">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="Red"/>
    </Style>
    <Style x:Key="132KV" TargetType="Control">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="Green"/>
    </Style>
    <Style x:Key="400KV" TargetType="Control">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="Purple"/>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel>
        <CC:BreakerCC Status="{Binding Status}" Style="{StaticResource 132KV}" Height="20" Width="20"/>
    </StackPanel>
</Grid>

但是当状态为 3 或 4 时,我需要将前景更改为红色,但这不起作用!

为画笔使用 TemplateBindings。绑定宽度和高度根本不是必需的。

<Style TargetType="local:MyCC">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyCC">
                <Grid>
                    <Rectangle Fill="{TemplateBinding Foreground}"/>
                    <Rectangle Fill="{TemplateBinding Background}" Margin="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

请注意,您通常会拥有 Border 元素而不是 Grid,并将 TemplateBindings 分配给它的 Background、BorderBrush 和 BorderThickness 属性 - 正如 Visual Studio 在您创建新的自定义控件时默认完成的那样。


编辑:看来您根本不需要自定义控件。只需像这样创建 ContentControl 样式:

<Window.Resources>
    <Style TargetType="ContentControl" x:Key="BaseStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Path x:Name="path" Stroke="{TemplateBinding Foreground}"
                              Data="{TemplateBinding Content}" Stretch="Fill"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding Path=Status}" Value="0">
                            <Setter TargetName="path"
                                    Property="Visibility" Value="Hidden"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=Status}" Value="1">
                            <Setter TargetName="path"
                                    Property="Visibility" Value="Hidden"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="Black"/>
        <Setter Property="BorderBrush" Value="{Binding Foreground,
                                        RelativeSource={RelativeSource Self}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Width" Value="20"/>
        <Setter Property="Height" Value="20"/>
    </Style>
    <Style x:Key="230KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Foreground" Value="Red"/>
    </Style>
    <Style x:Key="132KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Foreground" Value="Green"/>
    </Style>
    <Style x:Key="400KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Foreground" Value="Purple"/>
    </Style>
</Window.Resources>
<StackPanel>
    <ContentControl Style="{StaticResource 230KV}">
        <PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
    </ContentControl>
    <ContentControl Style="{StaticResource 132KV}">
        <PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
    </ContentControl>
    <ContentControl Style="{StaticResource 400KV}">
        <PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
    </ContentControl>
</StackPanel>