<Style x:Key="roungButtonTemplate" TargetType="Button"> <Setter Property="Width" Value="80"/> <Setter Property="Height" Value="80"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Name="OuterRing" Width ="80" Height ="80" Fill="DarkGreen"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="Pressed"> <VisualState > <VisualState.Setters> <Setter Target="OuterRing" Value="Red"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
  • And what's the point of changing the color? Depending on this is correct in different ways. - VladD
  • well, it is necessary that the ellipse was initially transparent, and when you clicked on the button, it was filled with some color. I want to make a round button, as in Skype UWP in conversations - Arthur
  • And what's the point of pressing the button? What happens in terms of program logic (and not in terms of how the interface looks)? - VladD
  • Nothing special, just send a message, that's all. and all the code that I found is for wpf, it does not work in UWP - Arthur
  • No, no, let's talk about the meaning. Does the transparency of the button mean that there is no typed message? - VladD

1 answer 1

I did it like this:

 <Style x:Key="RoundButtonTemplate" TargetType="Button"> <Setter Property="Width" Value="80"/> <Setter Property="Height" Value="80"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Name="OuterRing" Width ="80" Height ="80" Fill="DarkGreen"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Disabled"> <VisualState.Setters> <Setter Target="OuterRing.Fill" Value="LightGray"/> </VisualState.Setters> </VisualState> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Target="OuterRing.Fill" Value="DarkGreen"/> </VisualState.Setters> </VisualState> <VisualState x:Name="PointerOver"> <VisualState.Setters> <Setter Target="OuterRing.Fill" Value="DarkKhaki"/> </VisualState.Setters> </VisualState> <VisualState x:Name="Pressed"> <VisualState.Setters> <Setter Target="OuterRing.Fill" Value="Red"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

If you want more beautiful, with animations, then you need instead

 <VisualState x:Name="Pressed"> <VisualState.Setters> <Setter Target="OuterRing.Fill" Value="Red"/> </VisualState.Setters> </VisualState>

use

 <VisualState x:Name="Pressed"> <VisualState.Storyboard> <Storyboard> <ColorAnimation Duration="0:0:0.3" To="Red" Storyboard.TargetName="OuterRing" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"/> </Storyboard> </VisualState.Storyboard> </VisualState>