【WPF】 問題總結-RaidButton修改樣式模板後作用區域的變化

乾杯จุ๊發表於2020-12-31
AI

最近工作需要，需要重繪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>

 

以上重新修改後就能夠達到我所需要的要求：

點選按鈕任何一個區域 ，就能夠出發按鈕的事件

從這次的例子可以知道，自己還是有許多東西需要學習和總結的。

 

加油！

乾杯！*~(￣▽￣)~[] []~(￣▽￣)~*

 

相關文章