在这节学习下菜单控件Menu,ToolTip提示对象,画布控件Canvas,Viewbox
1、ViewBox
ViewBox这个控件通常和其他控件结合起来使用,是WPF中非常有用的控件。定义一个内容容器。ViewBox组件的作用是拉伸或延展位于其中的组件,以填满可用空间,使之有更好的布局及视觉效果。一个 Viewbox中只能放一个控件。如果多添加了一个控件就会报错。
组件常用属性:
Child:获取或设置一个ViewBox元素的单一子元素。
Stretch:获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间。具体设置值如下:
成员名称 | 说明 |
---|---|
None | 内容保持其原始大小。 |
Fill | 调整内容的大小以填充目标尺寸。 不保留纵横比。 |
Uniform | 在保留内容原有纵横比的同时调整内容的大小,以适合目标尺寸。 |
UniformToFill | 在保留内容原有纵横比的同时调整内容的大小,以填充目标尺寸。 如果目标矩形的纵横比不同于源矩形的纵横比,则对源内容进行剪裁以适合目标尺寸。 |
StretchDirection:获取或设置该组件的拉伸方向以决定该组件中的内容将以何种形式被延展。具体的设置值如下
成员名称 | 说明 |
---|---|
UpOnly | 仅当内容小于父项时,它才会放大。 如果内容大于父项,不会执行任何缩小操作。 |
DownOnly | 仅当内容大于父项时,它才会缩小。 如果内容小于父项,不会执行任何放大操作。 |
Both | 内容根据 Stretch 属性进行拉伸以适合父项的大小 |
接下来试试下面的示例,你可以通过选择下拉框中的不同设置值,来查看不同的效果。效果如下图。
2、画布面板 (Canvas)
Canvas是最基本的面板,只是一个存储控件的容器,它不会自动调整内部元素的排列及大小,它仅支持用显式坐标定位控件,它也允许指定相对任何角的坐标,而不仅仅是左上角。可以使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。通过设置Left和Right属性的值表示元素最靠近的那条边,应该与Canvas左边缘或右边缘保持一个固定的距离,设置Top和Bottom的值也是类似的意思。实质上,你在选择每个控件停靠的角时,附加属性的值是作为外边距使用的。如果一个控件没有使 用任何附加属性,它会被放在Canvas的左上方(等同于设置Left和Top为0)。
Canvas的主要用途是用来画图。Canvas默认不会自动裁减超过自身范围的内容,即溢出的内容会显示在Canvas外面,这是因为默认 ClipToBounds=”False”;我们可以通过设置ClipToBounds=”True”来裁剪多出的内容。
Canvas 可对其内部元素设定边界值,其作用类似于(Margin),默认为停靠左上角。
<Canvas>
<TextBox Text="左上角" Width="100" Height="100" Canvas.Top="0" Canvas.Left="0"/>
<TextBox Text="右上角" Width="100" Height="100" Canvas.Top="0" Canvas.Right="0"/>
<TextBox Text="右下角" Width="100" Height="100" Canvas.Bottom="0" Canvas.Right="0"/>
<TextBox Text="左下角" Width="100" Height="100" Canvas.Bottom="0" Canvas.Left="0"/>
</Canvas>
说明一点Canvas内的子控件不能使用两个以上的Canvas附加属性,如果同时设置Canvas.Left和Canvas.Right属性,那么后者将会被忽略。
3、ToolTip提示对象
FrameworkElement类中具有一个ToolTip属性,几乎所有WPF控件都继承自该属性。该属性用于获取或设置用户界面中为此元素显示的工具提示对象 (UI,Object) ,比如一个简单的提示字符串或一个复杂的提示布局,ToolTip是 ContentControl ,这意味着它可以包含任何类型的单个对象 (例如字符串、图像或面板) 。ToolTip控件不能有父级。 例如,不能 Button 将的 Content 属性设置为 ToolTip
4、Menu 介绍
Menu 表示一个 Windows 菜单控件,该控件可用于按层次组织与命令和事件处理程序关联的元素。 该 Menu 控件提供一个项列表,用于指定应用程序的命令或选项。 通常,单击菜单上的项会打开子菜单或导致应用程序执行命令。
Menu 是一个 ItemsControl,这意味着它可以包含任何类型 (的对象集合,例如字符串、图像或面板) 。 每个 Menu 可以包含多个 MenuItem 控件。每个 MenuItem 都可调用命令或调用 Click 事件处理程序。MenuItem 也可以有多个 MenuItem 元素作为子项,从而构成子菜单。
常用属性介绍
- FontFamily:字体系列; FontSize:字体大小; FontStretch:字体在屏幕上紧缩或加宽的程度;FontWeight:字体粗细;
- Background:背景; BorderBrush:边框颜色; BorderThickness:边框宽度; Foreground:前景色;
- Width/Height:宽度/高度; Name:元素标识名称; IsEnabled:使能,是否可用; Margin:外边距;
- Opacity:透明度; Visibility:可见性; IsVisible:是否可见; FlowDirection:其子元素的流动方向;
- LayoutTransform:在执行布局时应该应用于此元素的图形转换方式。 RenderTransform:元素的呈现位置的转换信息;
- RenderTransformOrigin:由RenderTransform声明的任何可能呈现转换的中心点,相对于元素的边界。
- HorizontalAlignment/VerticalAlignment:在父元素中组合此元素时所应用的水平对齐特征/垂直对齐特征。
- HorizontalContentAlignment/VerticalContentAlignment:控件内容的水平对齐方式/垂直对齐方式。
- Items:获取用于生成 ItemsControl 的内容的集合。ItemTemplate:获取或设置用来显示每个项的 DataTemplate。
- ItemsPanel:获取或设置模板,该模板定义对项的布局进行控制的面板。
- ItemsSource:获取或设置用于生成 ItemsControl 的内容的集合。
- IsMainMenu:获取或设置一个值,该值指示此 Menu 是否接收主菜单激活通知。
- SnapsToDevicePixels:获取或设置一个值,该值确定在呈现过程中,此元素的呈现是否应使用特定于设备的像素设置。
- ContextMenu:获取或设置通过用户界面请求上下文菜单时应显示的上下文菜单元素, (UI 从此元素中)
了解上面基本属性后,在窗口中添加上面4个控件,完整代码:
<Window x:Class="WpfApp6.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp6"
mc:Ignorable="d"
Title="WPF基础控件" Height="758.275" Width="1078.5" Icon="images/22i.jpg" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded">
<Grid Name="mygrid" >
<Button Name="btnlogin" IsDefault="True" Click="btnlogin_Click" Background="YellowGreen" BorderThickness="3" BorderBrush="Red" Content="登录" HorizontalAlignment="Left" Margin="166,95,0,0" VerticalAlignment="Top" Width="74" RenderTransformOrigin="-0.2,0.368"/>
<Label Content="帐号" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="54,23,0,0" VerticalAlignment="Top" Width="102"/>
<TextBox Name="txtname" HorizontalAlignment="Left" Height="23" Margin="142,23,0,0" TextWrapping="Wrap" Text="admin" VerticalAlignment="Top" Width="120"/>
<Label Content="密码" HorizontalAlignment="Left" Margin="276,23,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.088,0.6"/>
<PasswordBox Name="txtpass" HorizontalAlignment="Left" Height="22" Margin="330,23,0,0" Password="123456" PasswordChar="#" VerticalAlignment="Top" Width="120"/>
<Button Name="btncancle" IsCancel="True" Foreground="Chartreuse" FontSize="14" Click="btncancle_Click" Content="取消" HorizontalAlignment="Left" Margin="266,95,0,0" VerticalAlignment="Top" Width="74">
<Button.Background>
<ImageBrush ImageSource="images/32s.jpg"></ImageBrush>
</Button.Background>
</Button>
<RadioButton Content="老师" GroupName="role" HorizontalAlignment="Left" Margin="156,65,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked"/>
<RadioButton Content="学生" GroupName="role" HorizontalAlignment="Left" Margin="230,65,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.14,0.357" Checked="RadioButton_Checked"/>
<RadioButton Content="管理员" GroupName="role" HorizontalAlignment="Left" Margin="303,65,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked"/>
<!-- IsThreeState属性指定 ToggleButton 是否有两种或三种状态:true,false,null,即选中 、清除 和不确定-->
<CheckBox Content="汽车" Name="chkexcel" IsChecked="True" IsThreeState="True" HorizontalAlignment="Left" Margin="45,138,0,0" VerticalAlignment="Top"/>
<CheckBox Content="阅读" HorizontalAlignment="Left" Margin="118,138,0,0" VerticalAlignment="Top"/>
<CheckBox Content="唱歌" HorizontalAlignment="Left" Margin="181,138,0,0" VerticalAlignment="Top"/>
<CheckBox Content="体育" HorizontalAlignment="Left" Margin="241,138,0,0" VerticalAlignment="Top"/>
<Button Content="获取复选框" HorizontalAlignment="Left" Margin="301,135,0,0" VerticalAlignment="Top" Width="91" Click="Button_Click"/>
<Button Content="创建复选框" HorizontalAlignment="Left" Margin="409,134,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<!--Image图片控件,Stretch指定拉伸模式 -->
<Image HorizontalAlignment="Left" Name="myimg" Height="83" Margin="45,184,0,0" VerticalAlignment="Top" Width="85" Source="images/6p.jpg" Stretch="Fill" RenderTransformOrigin="0.541,0.157"/>
<Button Content="相对替换" HorizontalAlignment="Left" Margin="152,187,0,0" VerticalAlignment="Top" Width="69" Height="32" Click="Button_Click_2"/>
<Button Content="绝对替换" HorizontalAlignment="Left" Margin="152,240,0,0" VerticalAlignment="Top" Width="69" Height="28" RenderTransformOrigin="0.536,0.815" Click="Button_Click_3"/>
<!-- Border边框控件,与布局面板一起使用,里面只能有一个子元素,BorderThickness边框粗细,BorderBrush边框颜色,CornerRadius圆角大小,Background背景色-->
<Border BorderBrush="red" BorderThickness="3" HorizontalAlignment="Left" Height="32" Margin="266,184,0,0" VerticalAlignment="Top" Width="100">
<Label Content="我有边框" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border BorderBrush="BlueViolet" BorderThickness="5" CornerRadius="9" Background="Bisque" HorizontalAlignment="Left" Height="38" Margin="266,229,0,0" VerticalAlignment="Top" Width="100">
<Label Content="我有圆角" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="16,1,16,3"/>
</Border>
<!--ComboBox下拉框,IsDropDownOpen指定是否展开,默认不展开 -->
<ComboBox HorizontalAlignment="Left" Name="hecbm" IsDropDownOpen="False" Margin="403,187,0,0" VerticalAlignment="Top" Width="81" Height="22">
<ComboBoxItem Content="请选择" IsSelected="True" Background="#FF26D365"/>
<ComboBoxItem Content="亚洲"/>
<ComboBoxItem Content="非洲"/>
<ComboBoxItem Content="欧洲"/>
</ComboBox>
<ComboBox Name="mycbm" HorizontalAlignment="Left" Margin="403,241,0,0" VerticalAlignment="Top" Width="81" Height="27" RenderTransformOrigin="0.247,0.481"/>
<ListBox HorizontalAlignment="Left" Height="95" Margin="45,290,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.21,0.484">
<ListBoxItem Content="茶杯" IsSelected="True"/>
<ListBoxItem Content="茶叶"/>
<ListBoxItem Content="茶水"/>
<ListBoxItem Content="茶桌"/>
</ListBox>
<ListBox Name="mylist" HorizontalAlignment="Left" Height="95" Margin="166,290,0,0" VerticalAlignment="Top" Width="100"/>
<!-- DatePicker日期控件-->
<DatePicker Focusable="False" HorizontalAlignment="Left" Margin="301,290,0,0" VerticalAlignment="Top" Width="106" SelectedDateFormat="Long" />
<!--Slider 滑动控件,Orientation刻度方向(默认水平),TickPlacement刻度位置(默认没有):both/left/right/none,TickFrequency刻度间隔,IsSnapToTickEnabled表示数值变化形式(true代表整形,false代表浮点)-->
<Slider Name="sd1" HorizontalAlignment="Left" Margin="303,327,0,0" TickPlacement="Both" TickFrequency="1" IsSnapToTickEnabled="true" Maximum="100" Minimum="1" Value="1" VerticalAlignment="Top" Width="104"/>
<!--Label控件, Content指定内容:Binding绑定,ElementName绑定控件名称,Path绑定控件的value值,Mode=OneWay指单向影响-->
<Label Content="当前值:" HorizontalAlignment="Left" Margin="304,362,0,0" VerticalAlignment="Top"/>
<Label Content="{Binding ElementName=sd1,Path=Value,Mode=OneWay}" Name="mylbl" HorizontalAlignment="Left" Margin="360,362,0,0" VerticalAlignment="Top" Width="47"/>
<Slider HorizontalAlignment="Left" Name="sd2" Margin="421,282,0,0" TickPlacement="BottomRight" TickFrequency="5" Orientation="Vertical" Maximum="100" Minimum="1" Value="10" VerticalAlignment="Top" Height="103" Width="33" Background="#FFCCFB2D" BorderBrush="#FF4118B0"/>
<!--TextBlock文字块 -->
<TextBlock FontSize="{Binding ElementName=sd2,Path=Value,Mode=OneWay}" HorizontalAlignment="Left" Margin="459,290,0,0" TextWrapping="Wrap" Text="看我" VerticalAlignment="Top" Height="86" Width="61"/>
<!--ProgressBar进度条:Orientation方向(Horizontal/Vertical,水平/垂直),IsIndeterminate指定连续进度 -->
<ProgressBar Orientation="Horizontal" IsIndeterminate="true" Value="30" HorizontalAlignment="Left" Height="18" Margin="48,394,0,0" VerticalAlignment="Top" Width="327"/>
<ProgressBar Name="ps2" Orientation="Vertical" Value="0" Minimum="0" Maximum="120" HorizontalAlignment="Left" Height="149" Margin="402,394,0,0" VerticalAlignment="Top" Width="29"/>
<Button Content="加载进度" HorizontalAlignment="Left" Margin="441,434,0,0" VerticalAlignment="Top" Width="60" Click="Button_Click_4"/>
<Label Content="当前:" HorizontalAlignment="Left" Margin="438,469,0,0" VerticalAlignment="Top"/>
<Label Content="" Name="ps2lbl" HorizontalAlignment="Left" Margin="474,469,0,0" VerticalAlignment="Top"/>
<!--StackPanel堆栈布局控件,默认对齐是垂直方向 -->
<Label Content="堆积面板 (StackPanel)" HorizontalAlignment="Left" Margin="54,422,0,0" VerticalAlignment="Top" RenderTransformOrigin="-3.825,0.04"/>
<StackPanel HorizontalAlignment="Left" Height="109" Cursor="ArrowCD" Margin="56,446,0,0" VerticalAlignment="Top" Width="143">
<Button>吉利</Button>
<Button>长城</Button>
<Button Margin="0,2,0,2">奇瑞</Button>
<Button>红旗</Button>
<Button>比亚迪</Button>
</StackPanel>
<Border BorderBrush="Crimson" BorderThickness="1" HorizontalAlignment="Left" Height="92" Margin="219,450,0,0" VerticalAlignment="Top" Width="154">
<StackPanel Margin="0,0,0,0" Orientation="Horizontal" >
<Button Margin="5,0,5,0" Background="#FFA6C321">华山</Button>
<Button Margin="5,0,5,0">峨眉</Button>
<Button Margin="5,0,5,0">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFF7F0EA" Offset="1"/>
</LinearGradientBrush>
</Button.Background> 昆山
</Button>
<Button Margin="5,0,5,0">武当</Button>
</StackPanel>
</Border>
<Label Content="换行面板 (WrapPanel)" HorizontalAlignment="Left" Margin="54,555,0,0" VerticalAlignment="Top"/>
<!--WrapPanel流布局控件,默认对齐是垂直方向,Orientation元素布局方式 -->
<Border BorderBrush="red" BorderThickness="4" CornerRadius="12" Margin="56,560,569,26" Height="100">
<WrapPanel Orientation="Horizontal" ItemHeight="30" ItemWidth="40" Margin="0,0,0,22" >
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
</WrapPanel>
</Border>
<Label Content="表格式面板 (Grid)" HorizontalAlignment="Left" Margin="584,27,0,0" VerticalAlignment="Top"/>
<Grid HorizontalAlignment="Left" Height="171" Margin="584,48,0,0" VerticalAlignment="Top" Width="464" >
<!--RowDefinitions 设置行:3行-->
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--RowDefinitions 设置列:3列-->
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--Row 的值表示行坐标,Column 的值表示列坐标-->
<Button Grid.Row="0" Grid.Column="0">A1</Button>
<Button Grid.Row="0" Grid.Column="1">A2</Button>
<Button Grid.Row="0" Grid.Column="2">A3</Button>
<Button Grid.Row="1" Grid.Column="0">A4</Button>
<Button Grid.Row="1" Grid.Column="1">A5</Button>
<Button Grid.Row="1" Grid.Column="2">A6</Button>
<Button Grid.Row="2" Grid.Column="0">A7</Button>
<Button Grid.Row="2" Grid.Column="1">A8</Button>
<Button Grid.Row="2" Grid.Column="2">A9</Button>
</Grid>
<Label Content="表格式面板 (Grid)元素跨行设置 (RowSpan/ColumnSpan)" HorizontalAlignment="Left" Margin="592,248,0,0" VerticalAlignment="Top"/>
<Grid HorizontalAlignment="Left" Height="100" Margin="603,282,0,0" VerticalAlignment="Top" Width="445">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--绿色的RowSpan跨2行-->
<Rectangle Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Fill="Green" />
<!--黄色的RowSpan跨2行,ColumnSpan跨2列-->
<Rectangle Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Yellow" />
<!--红色的ColumnSpan跨2列-->
<Rectangle Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Fill="Red" />
<!--兰色的不跨行和列,位于第3行第3列-->
<Rectangle Grid.Row="2" Grid.Column="2" Fill="Blue" />
</Grid>
<!--菜单控件Menu,ToolTip提示对象,该属性用于获取或设置用户界面中为此元素显示的工具提示对象 -->
<Menu HorizontalAlignment="Left" Height="75" Margin="603,403,0,0" VerticalAlignment="Top" Width="184">
<MenuItem Header="文件" HorizontalAlignment="Left" ToolTip="文件菜单">
<MenuItem Header="打开" />
<MenuItem Header="保存" />
</MenuItem>
<MenuItem Header="帮助" HorizontalAlignment="Left" ToolTip="帮助信息">
<MenuItem Header="查看帮助" />
<MenuItem Header="技术支持" />
<Separator />
<MenuItem Header="关于" />
</MenuItem>
</Menu>
<!--画布控件Canvas -->
<Canvas HorizontalAlignment="Left" Height="75" Margin="814,403,0,0" VerticalAlignment="Top" Width="230">
<!---ViewBox这个控件通常和其他控件结合起来使用, 一个 Viewbox中只能放一个控件-->
<Viewbox Height="55" Canvas.Left="10" Canvas.Top="10" Stretch="Fill" Width="210">
<TextBlock TextWrapping="Wrap" Text="我是内容"/>
</Viewbox>
</Canvas>
</Grid>
</Window>
运行程序,可以看到:
就是这样的操作使用,慢慢的已经上手了,对每个控件就可以设置精细效果
东方不败,永闯辉煌。想要壮志凌云,干要脚踏实地。一等二靠三落空,一想二干三成功