不知不觉写了很多东西,不过结构有点乱了,写完了需要整理一下。回顾一下界面设计,这草图又要出来献丑了。
除了已经实现的圆形触控控件以外,其他按钮都是圆环+图片的方式,有比较有写一个自定义控件,取个名字叫RoundButton。
RoundButton类
RoundButton具有和Button相同的行为和视觉状态,唯一区别是RoundButton拥有图标
那么继承Button并添加依赖属性ImageSource类型为ImageSource。
再添加一个ImageBrush用于绘制图片。
代码如下:
public class RoundButton : Button
{
protected ImageBrush OpacityImageBrush;
private const string OpacityImageBrushName = "OpacityImageBrush";
public RoundButton()
{
DefaultStyleKey = typeof(RoundButton);
}
public readonly DependencyProperty ImageSourceProperty
= DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(RoundButton), new PropertyMetadata(OnImageSourceChanged));
private static void OnImageSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
var sender = o as RoundButton;
if (sender == null || e.NewValue == e.OldValue)
return;
sender.SetImageBrush(e.NewValue as ImageSource);
}
public ImageSource ImageSource
{
get { return (ImageSource)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
OpacityImageBrush = GetTemplateChild(OpacityImageBrushName) as ImageBrush;
if (ImageSource == null)
ImageSource = new BitmapImage(new Uri("/VirtualKeyboard.Controls;component/Icons/word.ok.png", UriKind.RelativeOrAbsolute));
else
SetImageBrush(ImageSource);
}
private void SetImageBrush(ImageSource imageSource)
{
if (OpacityImageBrush == null)
return;
OpacityImageBrush.ImageSource = imageSource;
}
}
RoundButton模板
编写好RoundButton类后还需要编写其模板已呈现出圆形按钮的效果
基本模板由两个重叠的圆Ellipse构成:
<StackPanel>
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Margin="3">
<Ellipse
x:Name="ButtonBackground"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{StaticResource PhoneStrokeThickness}"
Fill="{TemplateBinding Background}"
Margin="{StaticResource PhoneTouchTargetOverhang}" />
<Ellipse
x:Name="ButtonForeground"
Fill="{TemplateBinding Foreground}"
Margin="{StaticResource PhoneTouchTargetOverhang}">
<Ellipse.OpacityMask>
<ImageBrush x:Name="OpacityImageBrush" />
</Ellipse.OpacityMask>
</Ellipse>
</Grid>
</StackPanel>
呈现如下:
为了对输入响应我需要按下的视觉状态VisualState Pressed 通过VisualStateGroups添加相应的动画板Storyboard实现
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonForeground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
呈现效果:
完整XAML代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<Style TargetType="local:RoundButton">
<Setter Property="BorderBrush" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="12" />
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:RoundButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonForeground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel>
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Margin="3">
<Ellipse
x:Name="ButtonBackground"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{StaticResource PhoneStrokeThickness}"
Fill="{TemplateBinding Background}"
Margin="{StaticResource PhoneTouchTargetOverhang}" />
<Ellipse
x:Name="ButtonForeground"
Fill="{TemplateBinding Foreground}"
Margin="{StaticResource PhoneTouchTargetOverhang}">
<Ellipse.OpacityMask>
<ImageBrush x:Name="OpacityImageBrush" />
</Ellipse.OpacityMask>
</Ellipse>
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
完成播放器界面布局
有了按钮,我还PS了一套图标,将RoundButton设置好布局后效果如下,是不是有点感觉了。