title
author
date
CreateTime
categories
win10 UWP button
lindexi
2018-08-10 19:16:53 +0800
2018-2-13 17:23:3 +0800
Win10 UWP
Button是一个常用控件,有很多和wpf一样,可以看《深入浅出WPF》,但还有一些虽然常用,但是可能大家不知道的功能
Button常用的就是点击
我们可以在button的click写上
在Button_Click按F12到代码写上点击按钮需要运行
private void Button\_Click(object sender, RoutedEventArgs e)
{
//这里写上点击按钮后触发
}
除了写在xaml.cs也可以写在ViewModel,ViewModel的写法很简单,我们需要在ViewModel建立一个方法,这个方法的参数为void
或object sender, RoutedEventArgs e
假如viewModel有一个方法 ce
在Button可以在Click写
Click="{x:Bind view.ce}"
原来的WPF使用的是Command,实在不好看,用了UWP我都不在WPF写Command
在用ViewModel需要在MainPage.xaml.cs写
viewModel view {set;get;}= new viewModel();
button content可以使用一个元素,这个元素可以是Grid,我们可以做一个圆形头像
先找出一张图,我们把这张图做头像
把图放到项目
<Button Height="100" Width="100" Margin="10,10,10,10" Padding="0" Foreground="{x:Null}" BorderBrush="{x:Null}" Background="{x:Null}">
<Button.Content>
<Ellipse Margin="0,0,0,0" Height="90" Width="90">
<Ellipse.Fill>
<ImageBrush ImageSource="Assets/20151226160608688.jpg" />
</Ellipse.Fill>
</Ellipse>
</Button.Content>
</Button>
注意,放在项目的图片,不是这么简单,具体如何使用,参见 win10 uwp 访问解决方案文件
我们可以修改鼠标在按钮上的样子
button可以设置属性,使用资源
资源可以写在页面
<Page.Resources>
</Page.Resources>
所有按钮使用同样式
<Page.Resources>
<Style TargetType="Button">
</Style>
</Page.Resources>
按钮的属性用<Setter Property="属性" Value="值"/>
按钮的背景
<Page.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="White"/>
</Style>
</Page.Resources>
指定一个样式,key
<Page.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="White"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
</Style>
<Style x:Key="button" TargetType="Button">
<Setter Property="Background" Value="White"/>
<Setter Property="Width" Value="50"/>
<Setter Property="Height" Value="50"/>
</Style>
</Page.Resources>
<Button Content="默认"/>
<Button Style="{StaticResource button}" Content="确定"/>
在设计,点按钮,右击,编辑模板副本,选择当前页
可以看到
<Page.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
<Setter Property="Padding" Value="8,4,8,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
在<VisualState x:Name="Pressed">
可以把里面写成这个状态的样子,按钮有正常,按下,鼠标在按钮上,可以对每个修改
点击Pressed更改pressed
看到这里按钮有背景
去掉背景,按F4把背景无画笔
添加过度
记录关键帧
选时间0.5改变背景
选时间,改变背景
点播放可以看到我们做出来的按钮,可以运行。移动到button显示文字
在装机必备移动到搜狐显示搜狐,具体代码
参考:http://blog.csdn.net/lindexi_gd/article/details/50166161
<Button Click="souhu\_Click" ToolTipService.ToolTip="搜狐视频" Padding="0" >
<Button.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Source="ms-appx:///Assets/搜狐.png" Grid.Row="0" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
<TextBlock Text="搜狐视频" Grid.Row="1" HorizontalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
显示图片
<Button Click="souhu\_Click" Padding="0" >
<Button.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Source="ms-appx:///Assets/搜狐.png" Grid.Row="0" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
<TextBlock Text="搜狐视频" Grid.Row="1" HorizontalAlignment="Center" />
</Grid>
</Button.Content>
<ToolTipService.ToolTip>
<Image Height="50" Width="50" Source="ms-appx:///Assets/搜狐.png"/>
</ToolTipService.ToolTip>
</Button>
参见:圆角按钮
https://github.com/lindexi/uwp/tree/master/uwp/control/Button
手机扫一扫
移动阅读更方便
你可能感兴趣的文章