我似乎無法創建一個看起來像這樣的按鈕(見圖片)。 2合1按鈕像雙按鈕
我試着到網格,2個橢圓和2周的TextBlocks的東西,看起來像它結合,但不能得到兩個不同的按鈕看的權利..
它通常以按鈕拆分一半,然後轉化成2個獨立的按鈕,S按鈕和A按鈕..
任何輸入將是非常有益..
我似乎無法創建一個看起來像這樣的按鈕(見圖片)。 2合1按鈕像雙按鈕
我試着到網格,2個橢圓和2周的TextBlocks的東西,看起來像它結合,但不能得到兩個不同的按鈕看的權利..
它通常以按鈕拆分一半,然後轉化成2個獨立的按鈕,S按鈕和A按鈕..
任何輸入將是非常有益..
用1個網格,2個橢圓和2周的TextBlocks我得到它的工作擺弄後.. 和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按鈕時,半圈將變成紫色。
我可能已經設法創建了你正在尋找的東西。請注意,這需要進一步工作因爲很多功能沒有實現。我所做的只是創建一個「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
,使我們的按鈕實際上是點擊。我還添加了一些事件處理程序來檢查一切是否按預期工作(它的確如此!)
再次,這只是一個簡單的例子,並沒有經過優化。有很大的改進空間。我只是想把你推向正確的方向。
如果您有任何問題,請隨時詢問。
看看我自己的答案..並看看你是否喜歡它..唯一覺得我不喜歡你的答案是你用於半圓形狀的路徑.. – ArchAngel
我也喜歡你的答案。至於路徑,我不同意,因爲使用正確的綁定可以產生任何想要的形狀(不只是橢圓形)。你的viewBox理念也非常好,你的答案比我的MVVM多得多,這非常棒。說實話,我以爲你不知道如何解決這個問題,所以我剛剛創建了一個快速劃分的示例,它是硬編碼的,並且不會對寫入的樣式產生太大的影響。我猜我們的答案都有優點,缺點,但現在你的是更發達:) –
我不是新手,即使我可以自己做,有時我喜歡看別人怎麼做..而且我給了你+1投票,因爲你的答案不是不好.. – ArchAngel
聽起來像所有你真正需要的是2個按鈕緊挨着。按鈕1是左邊的半圓形,按鈕2是右邊的,然後只是按鈕的內容或模板的樣式來看看你想要的。 – Logan
發表評論前,你甚至讀過任何答案嗎? – ArchAngel
您還沒有標記出其中的一個作爲您正在尋找的答案。如果其中一人回答了您的問題,請將其作爲您選擇的答案進行檢查,否則請不要期待有人進來並對此發表評論,好友。 – Logan