WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容

原文:WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容

简介

　　在前面一篇文章里面，我们实现了AvalonDock选项卡的动态添加，但是对于选项卡里面的内容，我们并没有实现任何有用的功能。

　　这篇文章里面，我们将实现对选项卡里面的内容和功能实现自定义。

　　　　完整系列

　　● 第一部分

　　● 第二部分

　　● 第三部分

　　在Git中下载工程源码

将自定义Page作为选项卡内容

Page定义

　　Page页面的Xaml代码如下：

<Page x:Class="AvalonProject.TestPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="300"
    Title="TestPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock  VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="14" Text="用户名:"></TextBlock>
        <TextBox Height="30" Grid.Column="1" Margin="5"></TextBox>

        <TextBlock VerticalAlignment="Center" Grid.Column="2" HorizontalAlignment="Right" FontSize="14" Text="年龄:"></TextBlock>
        <TextBox Height="30" Grid.Column="3" Margin="5"></TextBox>

        <TextBlock VerticalAlignment="Center" Grid.Row="1" HorizontalAlignment="Right" FontSize="14" Text="性别:"></TextBlock>
        <TextBox Height="30" Grid.Column="1" Grid.Row="1"  Margin="5"></TextBox>

        <TextBlock VerticalAlignment="Center" Grid.Row="1"  Grid.Column="2" HorizontalAlignment="Right" FontSize="14" Text="是否单身狗:"></TextBlock>
        <StackPanel Grid.Row="1" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center">
            <RadioButton  Content="是"></RadioButton>
            <RadioButton  Content="否"></RadioButton>
        </StackPanel>
        <Button  Name="btn_ShowInfo" Click="btn_ShowInfo_Click" Content="显示用户信息" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Height="30" Margin="5"></Button>
    </Grid>
</Page>

　上面的Xaml代码对应的按钮点击事件代码如下：

        private void btn_ShowInfo_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("这是自定义的AvalonDock选项卡内容！");
        }

将Page添加到AvalonDock标签

　　在MainWindow.xaml.cs里面的item_AddNew_Click代码修改如下：

　　

clickCount++;

            Frame frame = new Frame();
            frame.Content = new TestPage();

            LayoutAnchorable layOutAnc = new LayoutAnchorable() { Title = "新选项卡"+clickCount };
            layOutAnc.Content = frame;

            layOutPane.Children.Add(layOutAnc);

运行程序，观察效果

　　运行程序，效果如下：

　　

　　说明我们为AvalonDock标签添加的自定义内容成功！

为自定义标签添加退出验证

添加退出事件处理句柄

　　我们希望用户在我们自定义的选项卡工作的时候，保存完所有信息后，才能够退出。因此我们需要对自定义选项卡添加退出的验证。

　　从前面的AvalonDock可视化树形结构中，我们可以看到，所有的选项卡内容的承载容器都是LayoutAnchorable，因此我们只需要对其添加退出验证即可。

　　观察LayoutAnchorable定义，我们发现有个名为Closing返回类型为System.EventHandler< CandelEventArgs >的事件处理句柄。

　　我们自定义LayoutAnchorable的Closing事件处理句柄如下：　　

private void Tab_Close(object sender, CancelEventArgs e)
{
     if (true)
    {
        if (MessageBox.Show("还没有保存，是否要退出？", "提示", MessageBoxButton.YesNo) == MessageBoxResult.Yes)
        {

        }
        else
        {
            e.Cancel = true;
        }
    }
}

　　在item_AddNew_Click代码修改如下:

LayoutAnchorable layOutAnc = new LayoutAnchorable() { Title = "新选项卡"+clickCount };
layOutAnc.Content = frame;
layOutAnc.Closing += Tab_Close;//添加退出事件处理句柄=>添加的代码

运行程序，观察效果

　　运行程序，效果如下：

　　

总结

　　自此，我们已经比较完整地利用WPF+AvalonDock实现了类似于VS或者浏览器的选项卡效果。