c# - WPFボタンでボタンの境界線と楕円形の半分を取得するには?

Question

wpfでボタンスタイルを作ってみました。しかし、私は問題に直面しました。

1) ボタンの内側のスタイルを楕円の半分にしたい。

2) ゴールドカラーと#872234カラーのボタンボーダー。

私の XAML コード -

<Window x:Class="Kiosk_Testing.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">  

                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <!-- the background for the button -->
                            <Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="#872234" Offset="0"/>
                                            <GradientStop Color="#872234" Offset="0.9"/>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <!-- the "gel" hilight at the top of the button -->
                            <Rectangle RadiusX="20" RadiusY="30" Margin="5">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="#C53550" Offset="0.1"/>
                                            <GradientStop Color="#C43551" Offset="0.5"/>
                                            <GradientStop Color="#C43551" Offset="0.9"/>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <!-- place for the content inside the button to be displayed -->
                            <ContentPresenter Grid.RowSpan="2"   
                                  x:Name="PrimaryContent"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"
                                  Margin="{TemplateBinding Padding}" 
                                  Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                                  />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="gold" />            
        </Style>
    </Window.Resources>
    <Grid>
        <Button BorderThickness="50" HorizontalAlignment="Center" Content="Button" FontSize="26" FontFamily="Times New Roman" VerticalAlignment="Center" Width="163" Height="58" Margin="146,168,194,85">
            <Button.BorderBrush>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="Gold" Offset="0.1"/>
                        <GradientStop Color="#C43551" Offset="0.5"/>
                        <GradientStop Color="Gold" Offset="0.9"/>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Button.BorderBrush>
        </Button>
    </Grid>
</Window>

Answer 1

Borderオプションの代わりに使用Rectangleする場合は、以下の XAML を使用してBorderXAML を置き換えることができますRectangle。

<Border Margin="5" CornerRadius="14,14,4,4">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#C53550" Offset="0.1"/>
                <GradientStop Color="#C43551" Offset="0.5"/>
                <GradientStop Color="#C43551" Offset="0.9"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Border.Background>
</Border>

CornerRadiusプロパティを微調整して、目的の丸みを帯びた角を得ることができます。

完全なスタイル:

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">  

                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <!-- the background for the button -->
                    <Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="#872234" Offset="0"/>
                                    <GradientStop Color="#872234" Offset="0.9"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <!-- the "gel" hilight at the top of the button -->
                    <Border Margin="5" CornerRadius="14,14,4,4">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="#C53550" Offset="0.1"/>
                                    <GradientStop Color="#C43551" Offset="0.5"/>
                                    <GradientStop Color="#C43551" Offset="0.9"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <!-- place for the content inside the button to be displayed -->
                    <ContentPresenter Grid.RowSpan="2"   
                          x:Name="PrimaryContent"
                          HorizontalAlignment="Center" VerticalAlignment="Center"
                          Margin="{TemplateBinding Padding}" 
                          Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                          />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="gold" />            
</Style>

結果のグラフィック：

アップデート

ボタンにも金色の境界線が必要だったと思います。ゴールデンボーダーで更新されたスタイル:

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">  
                <Border BorderThickness="2" CornerRadius="28" BorderBrush="GoldenRod">
                    <Border BorderThickness="2" CornerRadius="27">

                         <Border.BorderBrush>
                              <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="Gold" Offset="0"/>
                                                    <GradientStop Color="Wheat" Offset="0.6"/>
                                                    <GradientStop Color="Gold" Offset="0.9"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>     
                        </Border.BorderBrush>
                    <Border BorderThickness="2" CornerRadius="26" BorderBrush="Gold">

                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <!-- the background for the button -->
                        <Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#872234" Offset="0"/>
                                        <GradientStop Color="#872234" Offset="0.9"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <!-- the "gel" hilight at the top of the button -->
                        <Border Margin="5" CornerRadius="14,14,4,4">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#C53550" Offset="0.1"/>
                                        <GradientStop Color="#C43551" Offset="0.5"/>
                                        <GradientStop Color="#C43551" Offset="0.9"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>

                        <!-- place for the content inside the button to be displayed -->
                        <ContentPresenter Grid.RowSpan="2"   
                              x:Name="PrimaryContent"
                              HorizontalAlignment="Center" VerticalAlignment="Center"
                              Margin="{TemplateBinding Padding}" 
                              Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                              />
                    </Grid>
                </Border>
            </Border>
        </Border>
        </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="gold" />            
</Style>