2 in 1 Taste wie Dual-Taste

Question

Ich kann nicht scheinen, eine Schaltfläche zu erstellen, die in etwa so aussieht (siehe Bild).

Ich habe versucht, ein Gitter, 2 Ellipsen und 2 Textblöcke zu etwas zu kombinieren, wie es aussieht, aber die beiden verschiedenen Tasten nicht bekommen kann rechts schauen ..

Es ist generell eine Schaltfläche Spaltung Hälfte und dann in zwei separaten Tasten, S-Taste und eine Taste ..

Jede Eingabe wäre sehr hilfreich ..

Answer 1

nach basteln mit 1 Rost, 2 Ellipsen und 2 Textblöcken ich es Arbeit bekam umgewandelt .. Und 2 Viewboxen für die Größenänderung.

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> 

-Code hinter:

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"); 
     } 
    } 

Das ist mein Ergebnis ist: Und es ist Maßstab der Lage ..

Wenn die Maus tritt in die S-Taste Der halbe Kreis wird in Rot geändert. Wenn die Maus die A-Taste betätigt, ändert sich der Halbkreis in Purpur.

Answer 2

Ich habe wahrscheinlich geschafft zu schaffen, was Sie gesucht haben. Bitte beachten Sie, dass dies weitere Arbeit erfordert, da eine Menge Funktionalität nicht implementiert wurde. Was ich gemacht habe, war nur ein "DualButton" zu erstellen, das separate anklickbare Teile hat und so aussieht, wie du es angegeben hast.

Sie können Ihren eigenen Stil und Funktionalität basierend auf meinem Beispiel erarbeiten.

Erstens, wie es aussieht:

Nun, um den Code. Ich habe es als userControl definiert, um die Verwaltung und Wiederverwendbarkeit zu vereinfachen, ohne XAML zu sehr zu belasten.

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> 

Also, was tatsächlich geschieht hier?

Zunächst gibt es natürlich das Layout-Raster. Es enthält zwei buttons, deren Vorlage auf PathGeometry festgelegt ist, um eine Ellipse zu erstellen. (Hier ist schon etwas Platz für Verbesserungen - Ich benutzte Werte festgelegt, so dass die button nicht wirklich skalierbar sein Versuchen Sie diese Eigenschaften mit einer grid Größe zu verbinden.)

Dann gibt ein textBlock auf offensichtliche Buchstaben auf die Schaltfläche Hälften . Auch hier habe ich mich nicht zu sehr mit dem Platzieren beschäftigt, ich habe sie einfach mitgeschleppt, damit sie gut aussahen.Sie können dies auch auf eigene Faust trainieren (ich hoffe: D)

Jetzt, mit der Code-Behind:

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"); 
    } 
} 

Hier haben wir eine RoutedEvent hinzufügen unsere Taste tatsächlich anklickbar zu machen. Ich fügte auch einige Ereignisbehandlungsroutinen hinzu, um zu überprüfen, ob alles wie erwartet funktionierte (es tat!)

Wieder ist dies nur ein schnelles Beispiel und ist keineswegs optimiert. Es gibt viel Raum für Verbesserungen. Ich wollte dich nur in die richtige Richtung drängen.

Wenn Sie weitere Fragen haben, zögern Sie nicht zu fragen.