嗨
我想超過2天了創建切換按鈕,在像上面的圖片按下狀態,但上邊框讓我頭疼。有沒有人有任何想法如何創建那個倒下的圓角?背景是從上到下的線性漸變:#b8c7d6 - #a8b3c4
任何幫助都將不勝感激!
我有這樣的事情,但它是遠離設計:
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<Border Background="Black" BorderThickness="1" BorderBrush="#FF4E4F50" CornerRadius="3"/>
<Border Background="Black" Margin="1" CornerRadius="3"/>
<Border Margin="2" CornerRadius="3">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#0099B9D1" Offset="0"/>
<GradientStop Color="#FF99B9D1" Offset="1"/>
<GradientStop Color="#B299B9D1" Offset="0.054"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Margin="2" CornerRadius="3" Opacity="0.3">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>
<TranslateTransform/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#00090909" Offset="0.022"/>
<GradientStop Color="#00000000" Offset="0.99"/>
<GradientStop Color="#45060606" Offset="0.001"/>
</LinearGradientBrush>
</Border.Background></Border>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
</Trigger>
<Trigger Property="IsChecked" Value="true">
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我曾嘗試但最終的圓角看起來不一樣......它們挺直。感謝您的回覆 – Zapacila