【WPF】 问题总结-RaidButton修改样式模板后作用区域的变化

 

 

最近工作需要，需要重绘RaidButton控件，具体想要达成的的效果是这样的：

 

当点击按钮任意一个地方的时候，按钮的背景改变。

于是我是这样对控件模板进行修改的：

<Style x:Key="raidstyle" TargetType="RadioButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid>
                            <Border x:Name="bord1"
                                Width="320"
                                Height="138"
                                BorderBrush="#6B778D"
                                BorderThickness="1"
                                CornerRadius="8" />
                            <Border x:Name="bord"
                                <Grid>
                                    <StackPanel Margin="0,33,0,0">
                                        <Grid
                                            Margin="0,-10,0,10"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center">
                                            <Ellipse x:Name="ell1"
                                                Width="33"
                                                Height="33"
                                                StrokeThickness="3"
                                                Stroke="White" />
                                            <Ellipse x:Name="ell2"
                                                Width="13"
                                                Height="13"
                                                StrokeThickness="1"
                                                Stroke="#2196F3"
                                                Fill="#2196F3"
                                                Visibility="Collapsed" />
                                        </Grid>
                                        <ContentPresenter
                                            Content="{TemplateBinding Content}"
                                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalAlignment}" />
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="bord1" Property="Background" Value="#FF919191" />
                                <Setter TargetName="bord1" Property="Opacity" Value="0.1" />
                                <Setter TargetName="ell1" Property="Stroke" Value="#2196F3" />
                                <Setter TargetName="ell2" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

但是这样就出现了问题，实际出来的作用并不是点击按钮任何一个地方就能够改变背景颜色

而是只能点击 字 所在的区域才能够出发这个触发器

于是对其他人进行了请教后，发现

需要将按钮的 “Border”  的“Background” ，"BorderBrush"，“BorderThickness”

三个属性绑定到对应的按钮上的模板本身上才可以

于是对代码进行了修改

<Style x:Key="raidstyle" TargetType="RadioButton">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid>
                            <Border x:Name="bord1"
                                Width="320"
                                Height="138"
                                BorderBrush="#6B778D"
                                BorderThickness="1"
                                CornerRadius="8" />
                            <Border x:Name="bord"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">

                                <Grid>
                                    <StackPanel Margin="0,33,0,0">
                                        <Grid
                                            Margin="0,-10,0,10"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center">
                                            <Ellipse x:Name="ell1"
                                                Width="33"
                                                Height="33"
                                                StrokeThickness="3"
                                                Stroke="White" />
                                            <Ellipse x:Name="ell2"
                                                Width="13"
                                                Height="13"
                                                StrokeThickness="1"
                                                Stroke="#2196F3"
                                                Fill="#2196F3"
                                                Visibility="Collapsed" />
                                        </Grid>
                                        <ContentPresenter
                                            Content="{TemplateBinding Content}"
                                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalAlignment}" />
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="bord1" Property="Background" Value="#FF919191" />
                                <Setter TargetName="bord1" Property="Opacity" Value="0.1" />
                                <Setter TargetName="ell1" Property="Stroke" Value="#2196F3" />
                                <Setter TargetName="ell2" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

以上重新修改后就能够达到我所需要的要求：

点击按钮任何一个区域 ，就能够出发按钮的事件

从这次的例子可以知道，自己还是有许多东西需要学习和总结的。

 

加油！