控件的属性、事件与样式资源
如何添加控件
添加控件的方式有多种,大家更喜欢下面哪一种呢?
1)使用诸如Blend for Visual Studio或Microsoft Visual Studio XAML设计器的设计工具。
2)在Visual Studio XAML编辑器中将控件添加到XAML代码中。
3)在代码中添加控件。 注意:当应用运行时会看到你在代码中添加的控件,但在 Visual Studio XAML 设计器中看不到。
前面我们通过在工具箱拖住控件以及直接在写XAML代码来设置控件,在教程的后面,我们会看到在C#后台代码中添加控件。Blend我们暂时还没有用到,不过其在绘制图形和动画上可谓非常强大和优秀。
设置控件的属性
控件的属性相比大家都已经会用了,一来可以直接在XAML中添加属性,二来可以在属性视图中添加和修改属性。
为控件添加事件
如果要添加和修改事件呢,同样在属性视图中,点击右上角的闪电图标即可。如果要添加Click事件,那么在Click的输入框中输入好事件名称后直接按Enter即可。此时VS就会自动跳转到C#后台代码中,第一个参数sender是对处理程序所附加的对象的应用,第二参数是事件数据,它通常在签名中显示为e参数。
private void btnSetStyle_Click(object sender, RoutedEventArgs e)
{
Button b = (Button)sender;
b.Height = 400;
b.Width = 320;
}
上面的这段代码这会将所点击的Button的高设置为400,宽设置为320;除了这种方式外,也可以按如下操作,其中btnSetStyle是当前Button的名字:
private void btnSetStyle_Click(object sender, RoutedEventArgs e)
{
btnSetStyle.Height = 400;
btnSetStyle.Width = 320;
}
除此之外,我们也可以不在XAML中定义Click事件,按照如下操作也可以达到相同的效果,它会将两个事件相互关联。
public MainPage()
{
this.InitializeComponent();
btnSetStyle.Click += new RoutedEventHandler(btnSetStyle_Click);
}
private void btnSetStyle_Click(object sender, RoutedEventArgs e)
{
btnSetStyle.Height = 400;
btnSetStyle.Width = 320;
}
为控件设置样式资源
即便没有添加过资源,也不清楚什么是样式,没关系,想必大家都玩过2048吧。游戏中有许多方格,那这些方格的样式会不会一个个去定义呢,当然不是,可以直接用样式资源来定位到所有的Button。
以下是一个基本样式,
<Page.Resources>
<Style TargetType="Button">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="40"/>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Background" Value="Gray"></Setter>
<Setter Property="Width" Value="100"></Setter>
<Setter Property="Height" Value="100"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Grid" Background="Transparent">
<Border x:Name="Border" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="{TemplateBinding Background}" >
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
但是这里也有一个问题,如果我们有10个Button控件,却只想其中8个用到这些定义,另外2个想用另一种控件,那该怎么办呢?
将样式定义为资源,其实是有2中方式的。
一种就是直接用Style的TargetType属性来定义到所有的目标控件。
另一种则除了用TargetType属性外,还可以用x:key属性,然后再具体的控件中庸显式的关键字StaticResource来设置具体的Style属性。
<Page.Resources>
<Style TargetType="Button">
<Setter Property="FontStyle" Value="Oblique" />
<Setter Property="FontSize" Value="20" />
<Setter Property="BorderBrush" Value="Green" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Foreground" Value="Orange" />
<Setter Property="Height" Value="80"/>
<Setter Property="Width" Value="160"/>
</Style>
<Style x:Key="OtherStyle" TargetType="Button">
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="Lavender" />
<Setter Property="Height" Value="160"/>
<Setter Property="Width" Value="320"/>
<Setter Property="Opacity" Value="0.2"/>
</Style>
</Page.Resources>
具体效果见下图,其中Opacity属性为透明度。
大家都知道类可以继承,样式也是可以继承的。
部分控件介绍
通过前面的学习,已经见过一些控件了,现在起将逐步见到更多控件。但由于控件太多,教程中无法一一介绍,请自行举一反三。教程内容也将不断更新。
Button
前面最常用的控件就是Button了,Button还有一个有意思的属性,当把鼠标指针放在Button上时,就会在Button的头顶冒出一串文本。
<Button ToolTipService.ToolTip="Go to www.blog.csdn.net/nomasp" Margin="692,458,0,230"/>
Button有一个很有意思的属性。
<Button Content="摩天轮" Margin="134,363,0,367">
<ToolTipService.ToolTip>
<Image MaxHeight="80" MaxWidth="100" Source="Assets/343219.jpg"/>
</ToolTipService.ToolTip>
</Button>
只要把鼠标放到Button上面就会显示出这张图片了,也叫做帮助提示吧。其实更简单的方法是下面这种。它显示的是一个后退的样式,而且鼠标放上去会有文字Back提示。
<Button Content="摩天轮" ToolTipService.ToolTip="Back"
Style="{StaticResource NavigationBackButtonNormalStyle}" />
ToggleSwitch
这个控件和Button很像,它像开关一样。
<ToggleSwitch x:Name="toggleSwitch1" Header="NoMasp Toggle"
OnContent="On" OffContent="Off" Toggled="ToggleSwitch_Toggled"
Margin="409,468,0,227"/>
<ToggleSwitch x:Name="toggleSwitch2" Header="NoMasp Toggle"
OnContent="On" OffContent="Off" IsOn="True"
Toggled="ToggleSwitch_Toggled" Margin="409,565,0,130"/>
MessageDialog
这控件和Button一起讲还蛮合适的,我们随意添加一个Button,然后写好Click事件如下。
private async void Button_Click(object sender, RoutedEventArgs e)
{
Windows.UI.Popups.MessageDialog messageDialog =
new Windows.UI.Popups.MessageDialog("噢,你刚刚踩到了地雷!");
await messageDialog.ShowAsync();
}
注意要在函数上加上async表示异步。
如果需要预览效果,可以参见教程随后的“用浮出控件做预览效果”。
ComboBox
ComboBox提供了下拉列表