Question

我似乎无法创建一个看起来像这样的按钮（见图片）。

我试图将网格，2个椭圆和2个文本块组合成看起来像它的东西，但不能让两个不同的按钮看起来正确..

它通常是一个按钮分成两半然后转换成2个单独的按钮，S按钮和A按钮..

任何输入都会非常有用..

Answer 1

在修补1个网格，2个省略号和2个文本块后，我得到了它的工作.. 还有2个用于调整大小的Viewbox。

的Xaml：

<Window x:Class="Dual_Button.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Dual_Button"
        mc:Ignorable="d"
        Title="Dual Button" Height="260" Width="260">
    <Window.Resources>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <SolidColorBrush x:Key="SubBack" Color="#FFD1FF00"/>
        <SolidColorBrush x:Key="AudioBack" Color="#FF00C5FF"/>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid x:Name="grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Ellipse x:Name="sub_Background" Height="{Binding ActualHeight, ElementName=grid, Mode=OneWay}" Width="{Binding ActualWidth, ElementName=grid, Mode=OneWay}" Fill="{DynamicResource SubBack}"/>
        <Button x:Name="btn_Sub" Background="{x:Null}" Foreground="White" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" Padding="0" BorderThickness="0" Click="btn_Sub_Click" Style="{DynamicResource ButtonStyle1}" MouseEnter="btn_Sub_MouseEnter" MouseLeave="btn_Sub_MouseLeave">
            <Viewbox Margin="25,10,10,25">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="S"/>
            </Viewbox>
        </Button>
        <Ellipse x:Name="Audio_Background" Height="{Binding ActualHeight, ElementName=grid, Mode=OneWay}" Width="{Binding ActualWidth, ElementName=grid, Mode=OneWay}" Fill="{DynamicResource AudioBack}" Grid.Column="1" HorizontalAlignment="Right"/>
        <Button x:Name="btn_Audio" Background="{x:Null}" Foreground="White" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" Padding="0" BorderThickness="0" Grid.Column="1" Click="btn_Audio_Click" Style="{DynamicResource ButtonStyle1}" MouseEnter="btn_Audio_MouseEnter" MouseLeave="btn_Audio_MouseLeave">
            <Viewbox Margin="10,10,25,25">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="A"/>
            </Viewbox>
        </Button>
    </Grid>
</Window>

代码背后：

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        void btn_Sub_MouseEnter(object sender, MouseEventArgs e)
        {
            try { sub_Background.Fill = Brushes.Red; } catch { }
        }
        void btn_Sub_MouseLeave(object sender, MouseEventArgs e)
        {
            try { sub_Background.Fill = (Brush)FindResource("SubBack"); } catch { }
        }
        void btn_Sub_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Subtitles");
        }

        void btn_Audio_MouseEnter(object sender, MouseEventArgs e)
        {
            try { Audio_Background.Fill = Brushes.Purple; } catch { }
        }
        void btn_Audio_MouseLeave(object sender, MouseEventArgs e)
        {
            try { Audio_Background.Fill = (Brush)FindResource("AudioBack"); } catch { }
        }
        void btn_Audio_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Audio");
        }
    }

这是我的结果：它的规模可以......

当鼠标进入S按钮时，半圈将变为红色。当鼠标进入A按钮时，半圆将变为紫色。

Answer 2

我可能设法创造了你想要的东西。请注意，这需要进一步工作，因为许多功能未实现。我所做的只是创建一个“DualButton”，它具有单独的可点击部分，并且看起来像你提供的那样。

您可以根据我的示例计算出自己的风格和功能。

首先，它看起来如何：

现在，到代码。我将它定义为userControl，以便于管理和重用，而不会过多地破坏XAML。

<强> XAML：

<UserControl x:Class="WpfApplication2.DualButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:WpfApplication2"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <Button Click="Button_Click_1">
        <Button.Template>
            <ControlTemplate>
                <Grid>
                    <Path Fill="Lime" >
                        <Path.Data>
                            <PathGeometry>
                                <PathFigure StartPoint="150,0">
                                    <ArcSegment IsLargeArc="True"
                            Size="50, 50"
                            Point="150, 300"
                            SweepDirection="Counterclockwise" />
                                </PathFigure>
                            </PathGeometry>
                        </Path.Data>
                    </Path>
                    <TextBlock Margin="49,46,171,83" FontSize="150" TextAlignment="Center" HorizontalAlignment="Center" Foreground="White">S</TextBlock>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
    <Button Click="Button_Click_2">
        <Button.Template>
            <ControlTemplate>
                <Grid>
                    <Path Fill="Blue" >
                        <Path.Data>
                            <PathGeometry>
                                <PathFigure StartPoint="150,0">
                                    <ArcSegment IsLargeArc="True"
                            Size="50, 50"
                            Point="150, 300"
                            SweepDirection="Clockwise" />
                                </PathFigure>
                            </PathGeometry>
                        </Path.Data>
                    </Path>
                    <TextBlock Margin="162,47,41,84" FontSize="150" TextAlignment="Center" HorizontalAlignment="Center" Foreground="White" Width="97">A</TextBlock>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

那么，这里究竟发生了什么？

首先，当然有布局网格。它包含两个buttons，其模板设置为PathGeometry以创建椭圆。（这里有一些需要改进的地方 - 我使用的是固定值，因此button无法真正扩展。请尝试将这些属性与grid尺寸相关联）

然后在按钮的两半有明显的字母textBlock。再次，我没有太多放置，我只是拖他们，所以他们看起来很好。你也可以自己解决这个问题（我希望：D）

现在，使用代码隐藏：

public partial class DualButton : UserControl
{
    public DualButton()
    {
        InitializeComponent();
    }

    public static readonly RoutedEvent ClickEvent =
EventManager.RegisterRoutedEvent("Click", RoutingStrategy.Bubble,
typeof(RoutedEventHandler), typeof(DualButton));

    public event RoutedEventHandler Click
    {
        add { AddHandler(ClickEvent, value); }
        remove { RemoveHandler(ClickEvent, value); }
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        System.Windows.MessageBox.Show("Left");
    }

    private void Button_Click_2(object sender, RoutedEventArgs e)
    {
        System.Windows.MessageBox.Show("Right");
    }
}

我们在这里添加RoutedEvent以使我们的按钮实际上可以点击。我还添加了一些事件处理程序来检查一切是否按预期工作（确实如此！）

同样，这只是一个简单的例子，绝不是优化的。还有很多需要改进的地方。我只是想把你推向正确的方向。

如果您还有其他问题，请随时提出。

2合1按钮，如双按钮

2 个答案: