Мне нужно создать закругленную угловую глянцевую кнопку в WPF. Может кто-нибудь объяснить мне, какие шаги необходимы?
Как создавать/создавать закругленные угловые кнопки в WPF?
Ответ 1
Вам нужно создать свой собственный контрольный шаблон для кнопки. просто взгляните на образец
создал стиль RoundCorner, внутри которого я изменил, а создал свой собственный новый шаблон управления с границей (CornerRadius = 8) для круглого угла и некоторого фона и другого эффекта триггера. Если вы знаете или знаете Expression Blend, это можно сделать очень легко.
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<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}">
<Grid x:Name="grid">
<Border x:Name="border" CornerRadius="8" BorderBrush="Black" BorderThickness="2">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5"
ScaleX="1.5" ScaleY="1.5"/>
<TranslateTransform X="0.02" Y="0.3"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Offset="1" Color="#00000000"/>
<GradientStop Offset="0.3" Color="#FFFFFFFF"/>
</RadialGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextElement.FontWeight="Bold">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
<TranslateTransform X="0.02" Y="0.3"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00000000" Offset="1"/>
<GradientStop Color="#FF303030" Offset="0.3"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF33962B"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Использование
<Button Style="{DynamicResource RoundCorner}" Height="25" VerticalAlignment="Top" Content="Show" Width="100" Margin="5" />
Ответ 2
Это скорее минимальный шаблон управления, чтобы получить кнопку с закругленными углами, однако вы не будете нажимать визуальные эффекты. Но вы можете добавить их в шаблон управления по мере необходимости. Я работал на темном фоне, поэтому на белом фоне.
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Я использовал шаблон управления из следующего сообщения в блоге в качестве отправной точки: http://shihac-sharp.blogspot.com.au/2012/05/button-with-rounded-corners-in-wpf.html
Ответ 3
Вы можете попробовать это...........
<Border BorderBrush="Black" Name="MyBorder"
Height="78"
Background="Red"
Width="74"
CornerRadius="3">
<Button Width="{Binding MyBorder.Width}"
Height="{Binding MyBorder.Height}"
Content="Hi" Background="Red"/>
</Border>
Ответ 4
Я знаю, что этот пост очень старый, но у меня есть ответ, который на удивление отсутствует из вышеприведенного, и также намного проще, чем большинство.
<Button>
<Button.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</Button.Resources>
</Button>
Поскольку шаблон ControlTemplate по умолчанию для элемента управления Button использует элемент Border, добавление стиля Border к ресурсам Button применяет этот стиль к этой границе. Это позволяет добавлять закругленные углы без необходимости создавать собственный шаблон ControlTemplate и без какого-либо кода. Он также работает на всех разновидностях кнопки (например, ToggleButton и RepeatButton).
Ответ 5
В качестве альтернативы вы можете закодировать что-то вроде этого:
<Border
x:Name="borderBtnAdd"
BorderThickness="1"
BorderBrush="DarkGray"
CornerRadius="360"
Height="30"
Margin="0,10,10,0"
VerticalAlignment="Top" HorizontalAlignment="Right" Width="30">
<Image x:Name="btnAdd" Width="{Binding borderBtnAdd.Width}" Height="{Binding borderBtnAdd.Height}" Source="Recursos/Images/ic_add_circle_outline_black_24dp_2x.png"/>
</Border>
"Button" будет выглядеть примерно так:
Вы можете установить любой другой контент вместо изображения.
Ответ 6
Это адаптированная версия ответа @Kishore Kumar, которая более проста и более точно соответствует стилю и цветам кнопок по умолчанию. Это также устраняет проблему, заключающуюся в том, что его триггер "IsPressed" находится в неправильном порядке и никогда не будет выполнен, поскольку "MouseOver" будет иметь прецедент:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Border x:Name="border" CornerRadius="2" BorderBrush="#707070" BorderThickness="1" Background="LightGray">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextElement.FontWeight="Normal">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#BEE6FD"/>
<Setter Property="BorderBrush" TargetName="border" Value="#3C7FB1"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#2C628B"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Ответ 7
в вашем app.xaml добавьте эту часть стиля:
<Application.Resources>
<Style TargetType="FrameworkElement" x:Key="VisibleAnimation">
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Opacity" Value="10"/>
<Setter Property="Height" Value="700"></Setter>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="Button" x:Key="BTNCORNER">
<Setter Property="Background" Value="White" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="7,7,7,7" Background="White" BorderBrush="#ccc" BorderThickness="1,1,1,1" >
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
then go to your button
<Button x:Name="loginButton" Style="{StaticResource BTNCORNER}" Margin="50,20,20,20" Click="loginButton_Click" FontSize="20" Width="93" Height="42" />
Ответ 8
Вы можете использовать вложенные свойства для установки радиуса границы кнопки (то же самое будет работать для текстовых полей).
Создать класс для прикрепленного свойства
public class CornerRadiusSetter
{
public static CornerRadius GetCornerRadius(DependencyObject obj) => (CornerRadius)obj.GetValue(CornerRadiusProperty);
public static void SetCornerRadius(DependencyObject obj, CornerRadius value) => obj.SetValue(CornerRadiusProperty, value);
public static readonly DependencyProperty CornerRadiusProperty =
DependencyProperty.RegisterAttached(nameof(Border.CornerRadius), typeof(CornerRadius),
typeof(CornerRadiusSetter), new UIPropertyMetadata(new CornerRadius(), CornerRadiusChangedCallback));
public static void CornerRadiusChangedCallback(object sender, DependencyPropertyChangedEventArgs e)
{
Control control = sender as Control;
if (control == null) return;
control.Loaded -= Control_Loaded;
control.Loaded += Control_Loaded;
}
private static void Control_Loaded(object sender, EventArgs e)
{
Control control = sender as Control;
if (control == null || control.Template == null) return;
control.ApplyTemplate();
Border border = control.Template.FindName("border", control) as Border;
if (border == null) return;
border.CornerRadius = GetCornerRadius(control);
}
}
Затем вы можете использовать синтаксис прикрепленного свойства для нескольких кнопок без дубликатов стилей:
<Button local:CornerRadiusSetter.CornerRadius="10">Click me!</Button>
<Button local:CornerRadiusSetter.CornerRadius="5, 0, 0, 5">Click me!</Button>
<Button local:CornerRadiusSetter.CornerRadius="3, 20, 8, 15">Click me!</Button>
Ответ 9
Ну, лучший способ быстро обойти углы и со стандартной анимацией - создать копию шаблона управления с помощью Blend. После того, как вы получите копию, установите радиус угла в теге Grid, и вы сможете иметь свой контроль с полной анимационной функциональностью и применимы к любому управлению кнопками. посмотрите, что это код:
<ControlTemplate x:Key="ButtonControlTemplate" TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}"
CornerRadius="8,8,8,8">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!--<Border CornerRadius="8,8,8,8"
Background="#002060"
BorderBrush="Red"
BorderThickness="2">-->
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
<!--</Border>-->
</Grid>
</ControlTemplate>
Я также редактировал VisualState = "PointerOver" специально в Storyboard.TargetName = "BorderBrush", потому что его ThemeResource получает квадрат углов всякий раз, когда запускается PointerOver.
Затем вы сможете применить его к вашему стилю управления следующим образом:
<Style TargetType="ContentControl" x:Key="ButtonLoginStyle"
BasedOn="{StaticResource CommonLoginStyleMobile}">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Background" Value="#002060"/>
<Setter Property="Template" Value="{StaticResource ButtonControlTemplate}"/>
</Style>
Итак, вы можете применить свои стили к любой кнопке.
Ответ 10
<Button x:Name="btnBack" Grid.Row="2" Width="300"
Click="btnBack_Click">
<Button.Template>
<ControlTemplate>
<Border CornerRadius="10" Background="#463190">
<TextBlock Text="Retry" Foreground="White"
HorizontalAlignment="Center"
Margin="0,5,0,0"
Height="40"
FontSize="20"></TextBlock>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Это отлично работает для меня.