button有很多和wpf一样,可以看《深入浅出WPF》
我们可以在button的click写上
~~~
<Button Content="确定" Click="Button_Click"/>
~~~
在Button_Click按F12到代码写上点击按钮需要运行
~~~
private void Button_Click(object sender, RoutedEventArgs e)
{
}
~~~
也可以用viewModel的一个方法 viewModel有一个方法 ce
可以在Click写
~~~
Click="{x:Bind view.ce}"
~~~
在用view需要在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>
~~~
我们可以修改鼠标在按钮上的样子
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="确定"/>
~~~
![这里写图片描述](https://box.kancloud.cn/2016-04-08_5707636ca07b0.jpg)
在设计,点按钮,右击,编辑模板副本,选择当前页![这里写图片描述](https://box.kancloud.cn/2016-04-08_5707636caedc9.png)
可以看到
~~~
<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">`可以把里面写成这个状态的样子,按钮有正常,按下,鼠标在按钮上,可以对每个修改
![这里写图片描述](https://box.kancloud.cn/2016-04-08_5707636cc6607.png)
点击Pressed更改pressed![点击Pressed更改pressed](https://box.kancloud.cn/2016-04-08_5707636cdc52f.png)
看到这里按钮有背景![看到这里按钮有背景](https://box.kancloud.cn/2016-04-08_5707636d0c8d1.png)
去掉背景,按F4把背景无画笔![去掉背景,按F4把背景无画笔](https://box.kancloud.cn/2016-04-08_5707636d1c9db.png)
添加过度![添加过度](https://box.kancloud.cn/2016-04-08_5707636d2ea24.png)
记录关键帧![记录关键帧](https://box.kancloud.cn/2016-04-08_5707636d493de.png "记录关键帧")
选时间0.5改变背景![选时间0.5改变背景](https://box.kancloud.cn/2016-04-08_5707636d5c7f5.png "选时间0.5改变背景")
选时间,改变背景![](https://box.kancloud.cn/2016-04-08_5707636d7381f.png)
点播放可以看到我们做出来的
可以运行
移动到button显示文字
在装机必备移动到搜狐显示搜狐 参考:[http://blog.csdn.net/lindexi_gd/article/details/50166161](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>
~~~
![这里写图片描述](https://box.kancloud.cn/2016-04-08_5707636d92e4a.jpg)
显示图片
~~~
<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>
~~~
- 前言
- UWP win10 app 新关键字x:Bing
- win10应用 UWP 使用MD5算法
- win10 UWP读写文件
- UWP appButtonBar样式
- C# 6.0 $&quot;Hello {csdn}&quot;
- Win10 UWP xaml 延迟加载元素
- UWP xaml 圆形头像
- UWP 绘制图形
- win10 uwp 通知Toast
- win10 UWP 显示地图
- win10 uwp 参考
- win10 uwp clone
- win10 uwp 装机必备应用 含源代码
- RichEditBox 使用自定义菜单
- win10 UWP FlipView
- win10 UWP 获取系统信息
- win10 UWP 申请微软开发者
- win10 UWP button
- win10 UWP Markdown 含源代码
- win10 UWP 应用设置
- win10 UWP 九幽数据分析
- win10 UWP 圆形等待
- win10 UWP 标题栏后退
- win10 UWP 单元测试
- win10 UWP 你写我读
- win10 UWP RSS阅读器
- win10 UWP MessageDialog 和 ContentDialog
- win10 UWP Hmac
- win10 UWP GET Post
- Win10 UWP Intro to controls and events
- win10 UWP Controls by function
- win10 uwp App-to-app communication 应用通信