WPF学习笔记——7)Canvas面板

Canvas面板是一种根据具体坐标信息来确定元素布局位置的一种容器,是一种轻量化的布局容器。

1、Canvas面板

首先我们新建一个WPF程序,在默认的XAML中将原始的Grid布局容器删除。从工具箱中拖入Canvas控件进入窗口,去掉Canvas的长宽限制。

如果我们这时把按钮组件拖入Canvas面板中,那么我们可以发现,按钮是通过Canvas.Left,Canvas.Top这两个属性特性来控制其在面板中的位置,同样的我们也可以使用Canvas.Right,Canvas.Bottom这两个或者其他特性的合适组合。这个属性特性的大小代表的是距离某个特定边的像素距离大小。

2、Z顺序

通过上述坐标来布置元素的位置时,可能会发生某两个元素部分重叠或者遮挡的现象,这时我们可以设置Z顺序来认为的控制元素之间的遮挡关系。

我们从工具箱中拖入一个DataGrid组件,将其与按钮重叠,这个时候我们就看不见按钮组件,我们可以设置Canvas.ZIndex属性来实现。一般的组件默认的Canvas.ZIndex值为0,我们可以形象地理解为景深,数值越大,景深越小,离我们的眼睛也就越近,那么我们把按钮的Canvas.ZIndex属性设置为大于0的整数,比如说1那么就可以完成按钮浮现出来的效果了:

我们也可以通过程序代码来修改某个组件的Canvas.ZIndex元素特性的值,通过点击其他的按钮来改变这个按钮的Canvas.ZIndex值,从而达到改变遮挡关系的效果。主要利用到的函数时Canvas.SetZIndex()这个方法,需要的两个参数分别为组件的名字和需要设置的Canvas.ZIndex的值。

3、InkCanvas元素

InkCanvas元素是一种常用于接收手写输入或者鼠标输入的一种组件,用户可以利用外部的手写设备或者鼠标在InkCanvas元素上绘制的图形信息。

<InkCanvas></InkCanvas>

其中我们可以设置属性EditingMode的值来设置绘画的模式。如果我们要在InkCanvas中添加组件,那么我们可以通过InkCanvas.Left和InkCanvas.Top属性设置其位置信息。

为了能让用户更加方便的调节绘画模式,我们可以设置一个下拉框读取模式的种类,通过用户选择模式来更改绘画模式

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <ComboBox Name="EditingMode" Margin="10" SelectionChanged="EditingMode_SelectionChanged">
            </ComboBox>
        </StackPanel>
        <InkCanvas Grid.Row="1" EditingMode="None" Name="InkCanvas" Background="AliceBlue">
            <Button Content="Button1" InkCanvas.Left="20" InkCanvas.Top="20"/>
        </InkCanvas>
    </Grid>

我们一般在窗口加载的时候读取绘画的所有模式

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    //读取所有的绘图模式类型到下拉选择框中显示
    foreach (InkCanvasEditingMode mode in Enum.GetValues(typeof(InkCanvasEditingMode)))
    {
        this.EditingMode.Items.Add(mode);
    }
    this.EditingMode.SelectedIndex = 0;
}

然后添加一个用户选择下拉框的响应程序

private void EditingMode_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    this.InkCanvas.EditingMode = (InkCanvasEditingMode)this.EditingMode.SelectedItem;
}

 效果如下:

 

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读