<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>
-
А какой смысл изменения цвета? В зависимости от этого правильно по-разному. – VladD 1 фев '17 в 16:10
-
ну, необходимо, чтобы изначально эллипс был прозрачным, а по нажатию на кнопку - заливался каким-либо цветом. хочу сделать круглую кнопку, как в скайп UWP в беседах – Arthur 1 фев '17 в 16:12
-
а какой смысл нажатия на кнопку? что происходит с точки зрения логики программы (а не с точки зрения того, как выглядит интерфейс)? – VladD 1 фев '17 в 16:13
-
да ничего особого, просто отправляется сообщение, и всё. а весь код который я находил - для wpf, он в UWP не работает – Arthur 1 фев '17 в 16:15
-
Не-не, давайте о смысле. Прозрачность кнопки означает, что нету набранного сообщения? – VladD 1 фев '17 в 16:16
1 ответ
У меня получилось вот так:
<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>
Если хотите красивее, с анимациями, то нужно вместо
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="OuterRing.Fill" Value="Red"/>
</VisualState.Setters>
</VisualState>
использовать
<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>