WPF：以自定义样式以编程方式更改控件的颜色

<DrawingImage x:Key="HexagonImage">
    <DrawingImage.Drawing>
        <DrawingGroup>
            <GeometryDrawing Brush="White"  
                       Geometry="M 250,0 L 750,0 L 1000,433 L 750,866 L 250,866 L 0,433 Z">
                <GeometryDrawing.Pen>
                    <Pen Brush="Black" Thickness="10" LineJoin="Round"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingImage.Drawing>
</DrawingImage>

<Style x:Key="HexagonButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <Image x:Name="hexImg" Source="{StaticResource HexagonImage}"/>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I have a button, that has this HexagonButton as its style, and I want to change its color programmatically, Iv'e tried changing the Backgroup property, but to no avail.

我有一个按钮,它有HexagonButton作为它的样式,我想以编程方式改变它的颜色,我试过改变Backgroup属性,但无济于事。

the only way I managed to do so, is to create a whole new style, with a new Drawing image. and assign it. But I'm certain there is an easier way to do so.

我设法做到的唯一方法是使用新的绘图图像创建一个全新的样式。并分配它。但我确信有一种更简单的方法可以做到这一点。

2 个解决方案

#1

I got it to work like by including the GeomteryDrawing directly in the Button template, and using RelativeSource bindings to the Foreground and Background properties of its Button ancestor (to which I assigned defaults in the style declaration):

我通过将GeomteryDrawing直接包含在Button模板中,并使用RelativeSource绑定到其Button ancestor的Foreground和Background属性(我在样式声明中为其指定了默认值)来实现它:

<Style x:Key="HexagonButton" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="White" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Image x:Name="hexImg">
                        <Image.Source>
                            <DrawingImage>
                                <DrawingImage.Drawing>
                                    <DrawingGroup>
                                        <GeometryDrawing Brush="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=Background}" Geometry="M 250,0 L 750,0 L 1000,433 L 750,866 L 250,866 L 0,433 Z">
                                            <GeometryDrawing.Pen>
                                                <Pen Brush="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=Foreground}" Thickness="10" LineJoin="Round" />
                                            </GeometryDrawing.Pen>
                                        </GeometryDrawing>
                                    </DrawingGroup>
                                </DrawingImage.Drawing>
                            </DrawingImage>
                        </Image.Source>
                    </Image>
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The default white and black button is then:

默认的白色和黑色按钮是:

<Button Style="{StaticResource HexagonButton}">Click me</Button>

And a custom button is:

自定义按钮是:

<Button Style="{StaticResource HexagonButton}" Background="Yellow" Foreground="Red">Click me</Button>

#2

If you want to change the background only around the hexagon, add Background="{TemplateBinding Background}" to the Grid in your ControlTemplate.

如果要仅在六边形周围更改背景,请在ControlTemplate中将Grid =“{TemplateBinding Background}”添加到网格中。

If you also want to change the background color of the inside of the hexagon, change the Brush of your GeometryDrawing to Transparent.

如果您还想更改六边形内部的背景颜色,请将GeometryDrawing的Brush更改为Transparent。