WPF点击不同界面上的按钮实现界面切换

原文:WPF点击不同界面上的按钮实现界面切换

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29844879/article/details/80207782

网上看到的都是在一个界面上使用同一个按钮实现界面切换，这里我来做个不同界面上的不同按钮实现界面切换。如下图：

可以看到右下角有个“查询数据”按钮，当点击查询按钮时切换到另一个界面，如下图：

虽然长得很像，但它们绝不是同一个按钮，当点击返回查询时，将回到前面的界面。

代码如下：

第一个界面叫DataManage，其xmal：

<UserControl x:Class="MyControlLibrarys.DataManage"
             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"  Margin="10 0"
              d:DesignHeight="600" d:DesignWidth="850" Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/GeneralStyle;component/Themes/Generic.xaml" />
                <ResourceDictionary Source="pack://application:,,,/GeneralStyle;component/Themes/DataGrid.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="120"/>
        </Grid.RowDefinitions>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
            <Label Content="查询条件" Grid.Column="0" FontSize="20" VerticalContentAlignment="Bottom"  HorizontalContentAlignment="Right"/>
            <CheckBox Grid.Row="1" Grid.Column="0" Name="uut_nameChebox" Content="UUT类型" FontSize="16" HorizontalAlignment="Right" Margin="0 10" Unchecked="Check_Unchecked"></CheckBox>
            <ComboBox Grid.Row="1" Grid.Column="1" Name="uut_nameCombox" FontSize="14" Margin="10" Background="Transparent" DropDownClosed="Combox_DropDownClosed"/>
            <CheckBox Grid.Row="2" Grid.Column="0" Name="uut_kindChebox" Content="UUT型号" FontSize="16"  HorizontalAlignment="Right" Margin="0 10" Unchecked="Check_Unchecked"></CheckBox>
            <ComboBox Grid.Row="2" Grid.Column="1" Name="uut_kindCombox" FontSize="14" Background="Transparent" Margin="10" DropDownClosed="Combox_DropDownClosed"/>
            <CheckBox Grid.Row="1" Grid.Column="2" Name="timeChebox" Content="操作时间" FontSize="16"  HorizontalAlignment="Right" Margin="0 10" Unchecked="Check_Unchecked"></CheckBox>
            <Label Content="从" Grid.Row="1" Grid.Column="3" FontSize="16" HorizontalContentAlignment="Right" VerticalContentAlignment="Center"></Label>
            <DatePicker Grid.Row="1" Grid.Column="4" Name="timeStatCombox" FontSize="14" Background="Transparent" Margin="0 10" CalendarClosed="DatePicker_CalendarClosed"/>
            <Label Content="到" Grid.Row="1" Grid.Column="5" FontSize="16" HorizontalContentAlignment="Right" VerticalContentAlignment="Center"></Label>
            <DatePicker Grid.Row="1" Grid.Column="6" Name="timeEndCombox" FontSize="14" Background="Transparent" Margin="0 10" CalendarClosed="DatePicker_CalendarClosed"/>
            <CheckBox Grid.Row="2" Grid.Column="2" Name="userChebox" Content="操 作 员 " FontSize="16" HorizontalAlignment="Right" Margin="0 10" Unchecked="Check_Unchecked"></CheckBox>
            <ComboBox Grid.Row="2" Grid.Column="4" Name="userCombox" FontSize="14" Background="Transparent" Margin="0 10" DropDownClosed="Combox_DropDownClosed"/>
            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="5" Grid.ColumnSpan="4" HorizontalAlignment="Center">
                <Button Content="重置" Style="{DynamicResource TeamviwerButtonStyle}" Width="100" Height="35" Margin="20 0" Click="Reset_Click"/>
                <Button Content="查询" Style="{DynamicResource TeamviwerButtonStyle}" Width="100" Height="35" Margin="10 0" Click="ConditionQuery_Click"/>
            </StackPanel>
            <Separator Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="9" Margin="20 5 20 20"/>
        </Grid>
        <DataGrid Grid.Row="1" ColumnHeaderStyle ="{DynamicResource DataGridColumnHeaderStyle}" Name="dgData"  AutoGenerateColumns="False" CanUserAddRows="False"
                  GridLinesVisibility="All" MouseDoubleClick="dgData_MouseDoubleClick">
            <DataGrid.Columns>
                <DataGridTextColumn Width="0.5*" Header="序号" ElementStyle="{StaticResource contentCenterStyle}" Binding="{Binding Path=OrderId, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"></DataGridTextColumn>
                <DataGridTextColumn Header="测试编号" Width="*" Binding="{Binding Path=id, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Visibility="Hidden"></DataGridTextColumn>
                <DataGridTextColumn Header="UUT" Width="*" Binding="{Binding Path=uut_name, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" ></DataGridTextColumn>
                <DataGridTextColumn Header="UUT型号" Width="*" Binding="{Binding Path=uut_kind, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" ></DataGridTextColumn>
                <DataGridTextColumn Header="UUT编号" Width="*" Binding="{Binding Path=uut_num, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" ></DataGridTextColumn>
                <DataGridTextColumn Header="操作员" Width="*" Binding="{Binding Path=user, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" ></DataGridTextColumn>
                <DataGridTextColumn Header="测试时间" Width="2*" Binding="{Binding Path=time,StringFormat='{}{0:yyy-MM-dd HH:mm:ss}', Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"></DataGridTextColumn>
                <DataGridTextColumn Header="备注" Width="*" Binding="{Binding Path=remark, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
        <StackPanel Grid.Row="2" Name="ClipCtrlStackPanel" Margin="0 0 0 20"></StackPanel>
        <StackPanel Grid.Row="3"  Orientation="Horizontal"  HorizontalAlignment="Right">
            <Button Content="查看数据" Style="{DynamicResource TeamviwerButtonStyle}" Width="120" Height="40" Margin="20 0" Click="CatData_Click"/>
            <Button Content="删除数据" Style="{DynamicResource TeamviwerButtonStyle}" Width="120" Height="40" Margin="20 0" Click="DelData_Click"/>
        </StackPanel>
    </Grid>
</UserControl>

后台代码：

在命名空间下定义个委托：

public delegate void CtrlSwitchHandler();   //定义委托

然后，定义事件，并在点击查看数据时触发事件：

public event CtrlSwitchHandler CtrlSwitchEvent;               //定义事件,用于界面切换
/// <summary>
        /// 查看数据
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void CatData_Click(object sender, RoutedEventArgs e)
        {
            if (this.dgData.SelectedItem == null)
            {
                MyDialog md = new MyDialog(1, "未选择需要查看的对象，请选择！");
                md.Show();
            }
            else
            {
                Result_NumStr = ((DataRowView)this.dgData.SelectedItem).Row["id"].ToString();
                if(Result_NumStr != "")
                {
                    //触发事件改变父窗口的值
                    if (CtrlSwitchEvent != null)
                    {
                        CtrlSwitchEvent();
                    }
                }
                else
                {
                    MyDialog md = new MyDialog(1, "不允许查看空值！");
                    md.Show();
                }
            }
        }

返回查询原理一样的，我这里界面名叫CatDataControl，在下面有用到，只是不要再定义委托了，这里就不讲述。

最后用一个UserControl装载这两个控件，也可以直接用mainwindow装载，我这里是项目需要，故使用UserControl控件，实现切换代码如下：

xaml：

<UserControl x:Class="MyControlLibrarys.SwitchInterface"
             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="350" Loaded="SwInterface_Load">
    <Grid>
        <StackPanel Name="stackPanelData"></StackPanel>
    </Grid>
</UserControl>

后台代码：

public partial class SwitchInterface : UserControl
    {
        public SwitchInterface()
        {
            InitializeComponent();
        }

        DataManage dataManage = new DataManage();         //用于切换的用户控件--数据管理控件
        private double originalHeight = 0.0;
        private void SwInterface_Load(object sender, RoutedEventArgs e)
        {
            originalHeight = stackPanelData.ActualHeight;
            dataManage.CtrlSwitchEvent += new CtrlSwitchHandler(CtrlSwitch_CatData);
            LoadStackPanelRight(dataManage);
        }

        //实现界面切换到查看数据界面
        private void CtrlSwitch_CatData()
        {
            CatDataControl catData = new CatDataControl(dataManage.Result_NumStr);                          //用于切换的用户控件--查看数据控件
            catData.CtrlSwitchEvent += new CtrlSwitchHandler(CtrlSwitch_dataManage);
            LoadStackPanelRight(catData);
        }

        //实现界面切换到数据管理界面
        private void CtrlSwitch_dataManage()
        {
            LoadStackPanelRight(dataManage);
        }

        //加载用户控件功能函数
        private void LoadStackPanelRight(UserControl userControl)
        {
            stackPanelData.Children.Clear();
            stackPanelData.Children.Add(userControl);
        }
    }

如此即可实现，这里面的代码不是每个都有用，这只是部分代码，但绝对能实现界面切换。