Comment faire une partie de WPF conception commune à plusieurs fenêtres

0

La question

donc je fais ce Visual Basic WPF et j'ai une barre de navigation qui sera commun entre plusieurs fenêtres, et je me demandais si il existe un moyen de faire une XAML et classe uniquement pour cette barre de navigation, puis l'importer dans d'autres fenêtres, donc je n'ai pas de copier et de coller le même code à chaque fois que je créer une nouvelle fenêtre.

Le code actuel:

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>
vb.net wpf
2021-11-23 21:09:40
1

La meilleure réponse

1
  1. Créer un nouveau UserControl (Projet->Ajouter un Contrôle Utilisateur (WPF) dans Visual Studio)

  2. Déplacer le "navGrid" élément pour être réutilisés (couper-coller) de la MainWindow pour le balisage XAML de la nouvellement créée UserControl.

    Le balisage XAML de la UserControl si l'ressembler à quelque chose comme ceci:

     <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>
    
  3. Déplacer n'importe quel code (copier-coller) qui est liée à la navigation dans le code-behind de la fenêtre pour le code-behind de l' UserControl

  4. Ajouter l' UserControl à la fenêtre où vous voulez sur votre barre de navigation commun:

     <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>
    
2021-11-24 14:36:42

Il a travaillé, merci pour l'aide. +1 :)
DeadSec

Dans d'autres langues

Cette page est dans d'autres langues

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................