如何使 WPF 设计的某些部分对多个 windows 通用

Question

所以我正在制作这个 Visual Basic WPF，我有一个导航栏，在多个 windows 之间是通用的，我想知道是否有办法制作 XAML 和 class 仅用于此导航栏，然后将其导入其他 windows 这样我就不必每次创建新的 window.

时都复制并粘贴相同的代码

当前代码：

MainWindow.vb

Class FloorWindow
    Private Sub SetAllInactive()
        ' This function will change all StackPanel objects
        ' of the navGrid to its inactive style which consists
        ' of opacity .1

        Dim childType As String

        For Each child In navGrid.Children
            childType = child.GetType().ToString()
            ' Check if child object of navGrid is a StackPanel
            If childType = "System.Windows.Controls.StackPanel" Then
                child.Opacity = 0.1
            End If
        Next
    End Sub
    Private Sub LogoBtnClick(sender As Object, e As RoutedEventArgs) Handles logoBtn.Click
        Trace.WriteLine("Logo Clicked")
        ' Go to default page
        SetAllInactive()
        floorStack.Opacity = 1
    End Sub

    Private Sub FloorBtnClick(sender As Object, e As RoutedEventArgs) Handles floorBtn.Click
        Trace.WriteLine("Floor Clicked")
        ' Go to floor page and change its stack to active attributes
        SetAllInactive()
        floorStack.Opacity = 1
    End Sub

    Private Sub ClientsBtnClick(sender As Object, e As RoutedEventArgs) Handles clientsBtn.Click
        Trace.WriteLine("Clients Clicked")
        ' Go to floor page and change its stack to active attributes
        SetAllInactive()
        clientsStack.Opacity = 1
    End Sub

    Private Sub SettingsBtnClick(sender As Object, e As RoutedEventArgs) Handles settingsBtn.Click
        Trace.WriteLine("Settings Clicked")
        ' Go to floor page and change its stack to active attributes
        SetAllInactive()
        settingsStack.Opacity = 1
    End Sub
End Class

MainWindow.xaml

<Window x:Class="FloorWindow"
        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:RestaurantManager"
        xmlns:fa5="http://schemas.fontawesome.com/icons/"
        mc:Ignorable="d"
        Title="Restaurant Floor" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="70"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="navGrid" Background=" #212121">
            <Grid.RowDefinitions>
                <!-- Height of item menu should be same as width of the outter column -->
                <RowDefinition Height="70"/>
                <RowDefinition Height="70"/>
                <RowDefinition Height="70"/>
                <RowDefinition Height="70"/>
            </Grid.RowDefinitions>
            <!-- Menu Item Defenition Start -->
            <Border Grid.Row="0" BorderBrush="White" BorderThickness="0 0 0 .1"/>
            <Button x:Name="logoBtn" Grid.Row="0" Panel.ZIndex="10" TabIndex="10" Opacity="0"/>
            <TextBlock Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40" Foreground="#03DAC5">
                E
            </TextBlock>
            <Border Grid.Row="1" BorderBrush="White" BorderThickness="0 0 0 .1"/>
            <Button x:Name="floorBtn" Grid.Row="1" Panel.ZIndex="10" TabIndex="10" Opacity="0"/>
            <StackPanel x:Name="floorStack" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">
                <fa5:SvgAwesome Icon="Solid_BorderAll" Width="20" Foreground="White"/>
                <TextBlock Foreground="White" HorizontalAlignment="Center" Margin="0,5,0,0">Floor</TextBlock>
            </StackPanel>
            <Border Grid.Row="2" BorderBrush="White" BorderThickness="0 0 0 .1"/>
            <Button x:Name="clientsBtn" Grid.Row="2" Panel.ZIndex="10" TabIndex="10" Opacity="0"/>
            <StackPanel x:Name="clientsStack" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Opacity=".1">
                <fa5:SvgAwesome Icon="Solid_UserFriends" Width="20" Foreground="White"/>
                <TextBlock Foreground="White" HorizontalAlignment="Center" Margin="0,5,0,0">Clients</TextBlock>
            </StackPanel>
            <Border Grid.Row="3" BorderBrush="White" BorderThickness="0 0 0 .1"/>
            <Button x:Name="settingsBtn" Grid.Row="3" Panel.ZIndex="10" TabIndex="10" Opacity="0"/>
            <StackPanel x:Name="settingsStack" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Center" Opacity=".1">
                <fa5:SvgAwesome Icon="Solid_Cogs" Width="20" Foreground="White"/>
                <TextBlock Foreground="White" HorizontalAlignment="Center" Margin="0,5,0,0">Settings</TextBlock>
            </StackPanel>
            <!-- Menu Item Defenition End -->
        </Grid>
    </Grid>
</Window>

Answer 1

新建UserControl（项目->在Visual Studio中添加用户控件（WPF））

将要重复使用（剪切和粘贴）的“navGrid”元素从 MainWindow 移动到新创建的 UserControl 的 XAML 标记。

UserControl 的 XAML 标记应如下所示：

 <UserControl ...
         xmlns:local="clr-namespace:RestaurantManager"
         xmlns:fa5="http://schemas.fontawesome.com/icons/">
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="70"/>
             <ColumnDefinition Width="1*"/>
         </Grid.ColumnDefinitions>
         <Grid x:Name="navGrid" Background=" #212121">
             <Grid.RowDefinitions>
                 <!-- Height of item menu should be same as width of the outter column -->
                 <RowDefinition Height="70"/>
                 <RowDefinition Height="70"/>
                 <RowDefinition Height="70"/>
                 <RowDefinition Height="70"/>
             </Grid.RowDefinitions>
             <!-- Menu Item Defenition Start -->
             <Border Grid.Row="0" BorderBrush="White" BorderThickness="0 0 0 .1"/>
             <Button x:Name="logoBtn" Grid.Row="0" Panel.ZIndex="10" TabIndex="10" Opacity="0"/>
             <TextBlock Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40" Foreground="#03DAC5">
                 E
             </TextBlock>
             <Border Grid.Row="1" BorderBrush="White" BorderThickness="0 0 0 .1"/>
             <Button x:Name="floorBtn" Grid.Row="1" Panel.ZIndex="10" TabIndex="10" Opacity="0"/>
             <StackPanel x:Name="floorStack" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">
                 <fa5:SvgAwesome Icon="Solid_BorderAll" Width="20" Foreground="White"/>
                 <TextBlock Foreground="White" HorizontalAlignment="Center" Margin="0,5,0,0">Floor</TextBlock>
             </StackPanel>
             <Border Grid.Row="2" BorderBrush="White" BorderThickness="0 0 0 .1"/>
             <Button x:Name="clientsBtn" Grid.Row="2" Panel.ZIndex="10" TabIndex="10" Opacity="0"/>
             <StackPanel x:Name="clientsStack" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Opacity=".1">
                 <fa5:SvgAwesome Icon="Solid_UserFriends" Width="20" Foreground="White"/>
                 <TextBlock Foreground="White" HorizontalAlignment="Center" Margin="0,5,0,0">Clients</TextBlock>
             </StackPanel>
             <Border Grid.Row="3" BorderBrush="White" BorderThickness="0 0 0 .1"/>
             <Button x:Name="settingsBtn" Grid.Row="3" Panel.ZIndex="10" TabIndex="10" Opacity="0"/>
             <StackPanel x:Name="settingsStack" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Center" Opacity=".1">
                 <fa5:SvgAwesome Icon="Solid_Cogs" Width="20" Foreground="White"/>
                 <TextBlock Foreground="White" HorizontalAlignment="Center" Margin="0,5,0,0">Settings</TextBlock>
             </StackPanel>
             <!-- Menu Item Defenition End -->
         </Grid>
     </Grid>
 </UserControl>

将与导航元素相关的任何代码（剪切和粘贴）从 window 的代码隐藏移动到 UserControl[ 的代码隐藏=18=]

将 UserControl 添加到您想要的任何 window 公共导航栏：

 <Window x:Class="FloorWindow"
         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:RestaurantManager"
         xmlns:fa5="http://schemas.fontawesome.com/icons/"
         mc:Ignorable="d"
         Title="Restaurant Floor" Height="450" Width="800">
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="70"/>
             <ColumnDefinition Width="1*"/>
         </Grid.ColumnDefinitions>
         <local:UserControl1 />
         ...
     </Grid>
 </Window>

如何使 WPF 设计的某些部分对多个 windows 通用

How to make some part of WPF design common to multiple windows

vb.net

wpf