반응형
WPF에서 둥근 모서리 버튼을 만들거나 만드는 방법은 무엇입니까?
WPF에서 둥근 모서리 광택 버튼을 만들어야 합니다.어떤 단계가 필요한지 설명해주실 수 있나요?
저는 이 게시물이 매우 오래된 것을 알고 있지만, 위에서 놀랍게도 누락된 답변이 있으며 대부분의 경우보다 훨씬 단순합니다.
<Button>
<Button.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</Button.Resources>
</Button>
단추 컨트롤의 기본 제어 템플리트는 테두리 요소를 사용하므로, 단추의 리소스에 테두리 스타일을 추가하면 해당 스타일이 해당 테두리에 적용됩니다.이렇게 하면 코드 없이도 직접 제어 템플릿을 만들 필요 없이 둥근 모서리를 추가할 수 있습니다.또한 모든 종류의 버튼(예: ToggleButton 및 RepeatButton)에서도 작동합니다.
단추에 대한 제어 템플릿을 직접 만들어야 합니다.샘플을 한 번 보세요.
RoundCorner라는 스타일을 만들고 그 안에서 제가 변경한 것은 오히려 둥근 모서리와 일부 배경 및 기타 트리거 효과를 위해 테두리가 있는 컨트롤 템플릿(CornerRadius=8)을 새로 만들었습니다.식 혼합을 알고 있거나 알고 있다면 매우 쉽게 수행할 수 있습니다.
<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" />
기본 스타일을 변경하지 않고 가장 간단한 솔루션은 다음과 같습니다.
<Style TargetType="Button" x:Key="RoundButton">
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5" />
</Style>
</Style.Resources>
</Style>
그런 다음 단추를 다음과 같이 정의합니다.
<Button Style="{DynamicResource RoundButton}" />
이는 모서리가 둥근 단추를 얻기 위한 최소 제어 템플릿에 가깝지만 마우스를 가리키거나 클릭하는 시각적 효과는 없습니다.그러나 필요에 따라 컨트롤 템플릿에 추가할 수 있습니다.저는 어두운 배경을 가지고 일했습니다. 그래서 하얀 배경을 가지고요.
<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
이것을 사용해 보십시오..........
<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>
세월이 흘렀음에도 불구하고, 저는 그것에 접근하는 다른 방법에 대해 생각하는 것이 흥미롭다고 생각합니다.
모든 버튼 템플릿을 다시 만드는 방법은 모든 것을 변경하고 싶지만 초보자에게는 사기가 떨어지거나 버튼의 모서리를 둥글게 만들고 싶을 때 훌륭한 방법입니다.모든 것을 바꿀 필요는 없지만 적어도 사건을 바꿔야 할 것입니다.
button.resources에서 "경계" 디자인을 수정하는 방법도 훌륭합니다. 초보자인 경우에는 모든 버튼을 변경하는 것이 더 많은 매개 변수로 디자인을 올리고 싶다면 매우 지루할 수 있습니다.
두 진영 모두에 발을 디딘 해결책이 있습니다.
창/페이지 리소스에 이 코드 입력:
<Style TargetType="Border" x:Key="RoundMe">
<Setter Property="CornerRadius" Value="4"/>
</Style>
그러면 단추의 경우:
<Button.Resources>
<Style TargetType="Border" BasedOn="{StaticResource RoundMe}"/>
</Button.Resources>
가장 간단한 방법은
<Button Content="OK"
Background="#D73C46"
Foreground="White"
BorderThickness="0"
Margin="10,25,10,5"
Width="275"
Height="34"
FontSize="12"
Click="CloseWindow"
HorizontalAlignment="Center">
<Button.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="3"/>
</Style>
</Button.Resources>
</Button>
또는 다음과 같은 코드를 지정할 수 있습니다.
<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"
Source="Recursos/Images/ic_add_circle_outline_black_24dp_2x.png"
Width="{Binding borderBtnAdd.Width}" Height="{Binding borderBtnAdd.Height}"/>
</Border>
"버튼"은 다음과 같이 나타납니다.
이미지 대신 다른 콘텐츠를 설정할 수 있습니다.
이것은 @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>
처음 시작할 때 저는 항상 위치에 대한 설명이 없는 코드 조각이 제공되는 것을 싫어했습니다.그래서 다음과 같은 것이 있습니다.
<Window x:Class ...>
<Window.Resources>
<Style x:Key="btnRound" TargetType="Button">
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</Style.Resources>
</Style>
</Window.Resources>
<Grid>
<Button Content="Select" Click="Select_Click" Style="{StaticResource btnRound}" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Padding="10,2"/>
</Grid>
</Window>
버튼 테두리 반지름을 설정하는 데 첨부된 속성을 사용할 수 있습니다. 텍스트 상자에도 마찬가지입니다.
연결된 속성에 대한 클래스 만들기
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>
당신의 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>
단추
<Button x:Name="loginButton"
Style="{StaticResource BTNCORNER}"
Margin="50,20,20,20"
Click="loginButton_Click"
FontSize="20" Width="93" Height="42" />
표준 애니메이션을 사용하여 모서리를 빠르게 회전시키는 가장 좋은 방법은 블렌드를 사용하여 컨트롤 템플릿의 복사본을 만드는 것입니다.사본을 받으면 그리드 태그의 모서리 반지름을 설정하고 모든 애니메이션 기능을 사용하여 컨트롤을 모든 버튼 컨트롤에 적용할 수 있어야 합니다.보세요, 이것이 코드입니다.
<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".대상 이름="BorderBrush"는 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>
원하는 단추에 스타일을 적용할 수 있습니다.
비록 이 질문에 대답한 지 오래되었지만, 저는 사람들이 이러한 해결책들 중 어떤 것보다 더 간단하다고 생각할 수 있는 대안적인 접근법을 사용했습니다(키스 스타인의 훌륭한 대답조차도).그래서 혹시라도 도움이 될까봐 글을 올립니다.
XAML을 작성하거나 템플릿을 바꾸거나 다른 속성을 설정/변경할 필요 없이 버튼에서 둥근 모서리를 만들 수 있습니다.버튼의 "로드됨" 이벤트에 대해 원하는 스타일의 이벤트 설정기를 사용하고 코드백으로 변경하기만 하면 됩니다.
(또한 스타일이 별도의 리소스 사전 XAML 파일에 있는 경우 이벤트 코드를 리소스 사전의 코드 뒤에 있는 파일에 넣을 수 있습니다.)
저는 이렇게 합니다.
Xaml 스타일:
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<EventSetter Event="Loaded" Handler="ButtonLoaded"/>
</Style>
코드백:
public partial class ButtonStyles
{
private void ButtonLoaded(object sender, RoutedEventArgs e)
{
if (!(sender is Button b))
return;
// Find the first top-level border we can.
Border border = default;
for (var i = 0; null == border && i < VisualTreeHelper.GetChildrenCount(b); ++i)
border = VisualTreeHelper.GetChild(b, i) as Border;
// If we found it, set its corner radius how we want.
if (border != null)
border.CornerRadius = new CornerRadius(3);
}
}
기존 리소스 사전 xaml 파일에 코드 뒤에 있는 파일을 추가해야 하는 경우 Visual Studio 솔루션의 해당 XAML 파일 아래에 코드 뒤에 있는 파일을 자동으로 표시할 수도 있습니다..NET Core 프로젝트에서 적절한 이름을 지정합니다(예: 리소스 사전이 "MyDictionary.xaml"인 경우 코드 뒤에 있는 파일의 이름을 "MyDictionary.xaml.cs "로 지정)..NET Framework 프로젝트의 경우 XML 모드에서 .csproj 파일을 편집해야 합니다.
오래된 질문인 것은 알지만 만약 당신이 xaml 대신 c#에 버튼을 만들고 싶다면 당신은 설정할 수 있습니다.CornerRadius그것은 당신의 버튼을 둥글게 할 것입니다.
Button buttonRouded = new Button
{
CornerRadius = 10,
};
버튼 라운드 코드를 넣었을 때 왜 그들의 xaml이 작동하지 않는지 궁금해하는 사람들을 위해, 그것이 끝나는 것을 보기 위해 이전 줄을 확인하세요./>/가 있으면 꺼냅니다.
public string[] GetFreeIntervals(TimeSpan[] startTimes,
int[] durations,
TimeSpan beginWorkingTime,
TimeSpan endWorkingTime,
int consultationTime)
{
var busyIntervals = new List<(TimeSpan start, TimeSpan end)>();
for (var i = 0; i < startTimes.Length; i++)
{
var busyStart = startTimes[i];
var busyEnd = busyStart.Add(new TimeSpan(0, durations[i], 0));
busyIntervals.Add((busyStart, busyEnd));
}
var freeIntervals = new List<(TimeSpan start, TimeSpan end)>();
var current = beginWorkingTime;
while (current < endWorkingTime)
{
var busy = false;
foreach (var interval in busyIntervals)
{
if ((current >= interval.start && current < interval.end) ||
(interval.start > current && interval.start - current < new TimeSpan(0, 30, 0)))
{
current = interval.end;
busy = true;
break;
}
}
if (!busy)
{
var freeEnd = current.Add(new TimeSpan(0, consultationTime, 0));
if (freeEnd <= endWorkingTime)
{
freeIntervals.Add((current, freeEnd));
}
current = freeEnd;
}
}
return freeIntervals.Select(interval => $"{interval.start}-{interval.end}").ToArray();
}
<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>
이것은 저에게 잘 맞습니다.
언급URL : https://stackoverflow.com/questions/6745663/how-to-create-make-rounded-corner-buttons-in-wpf
반응형
'prosource' 카테고리의 다른 글
| 이클립스의 어두운 색 구성표 (0) | 2023.05.03 |
|---|---|
| Git 분기 이름에 슬래시 문자 사용 (0) | 2023.05.03 |
| 날짜/시간 문자열을 다른 날짜 문자열로 변환하려면 어떻게 해야 합니까? (0) | 2023.05.03 |
| WPF 날짜 선택기의 문자열 형식 변경 (0) | 2023.04.28 |
| C# 코드에서 wpf의 ResourceDictionary에 액세스하려면 어떻게 해야 합니까? (0) | 2023.04.28 |