locked
WPF pages: how to include common XAML code? RRS feed

  • Question

  • Hi Geniuses,

    How to let WPF pages share common info or XAML code?

    Here is my code.

    Page1

    <Page x:Class="WpfApp1.pages.Page1"
          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" 
          xmlns:local="clr-namespace:WpfApp1.pages"
          mc:Ignorable="d" 
          d:DesignHeight="300" d:DesignWidth="300"
          Title="Page1">
    
        <Grid>
            <TextBlock  Width="{Binding ActualWidth, ElementName=fm}" FontSize="20" TextWrapping="Wrap" Text="common info (i.e. xaml code)" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,50,0,0"/>
            <TextBlock  Width="{Binding ActualWidth, ElementName=fm}" FontSize="36" TextWrapping="Wrap" Text="Page 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    
        </Grid>
    </Page>
    

    Page2

    <Page x:Class="WpfApp1.pages.Page2"
          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" 
          xmlns:local="clr-namespace:WpfApp1.pages"
          mc:Ignorable="d" 
          d:DesignHeight="300" d:DesignWidth="300"
          Title="Page2">
    
        <Grid>
            <TextBlock  Width="{Binding ActualWidth, ElementName=fm}" FontSize="20" TextWrapping="Wrap" Text="common info (i.e. xaml code)" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,50,0,0"/>
            <TextBlock  Width="{Binding ActualWidth, ElementName=fm}" FontSize="36" TextWrapping="Wrap" Text="Page 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Page>


    Page3

    <Page x:Class="WpfApp1.pages.Page3"
          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" 
          xmlns:local="clr-namespace:WpfApp1.pages"
          mc:Ignorable="d" 
          d:DesignHeight="300" d:DesignWidth="300"
          Title="Page3">
    
        <Grid>
            <TextBlock  Width="{Binding ActualWidth, ElementName=fm}" FontSize="20" TextWrapping="Wrap" Text="common info (i.e. xaml code)" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,50,0,0"/>
            <TextBlock  Width="{Binding ActualWidth, ElementName=fm}" FontSize="36" TextWrapping="Wrap" Text="Page 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Page>
    

    MainWindow

    <Window x:Class="WpfApp1.MainWindow"
            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:WpfApp1"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <StackPanel Orientation="Horizontal" Height="30" Margin="0" VerticalAlignment="Top" >
                <Button Content="Page 1" Width="80" Click="BtnClickP1" />
                <Button Content="Page 2" Width="80" Margin="10,0,0,0" Click="BtnClickP2"/>
                <Button Content="Page 3" Width="80" Margin="10,0,0,0" Click="BtnClickP3"/>
            </StackPanel>
            <Frame x:Name="fm" Margin="0,40,0,0" />
        </Grid>
    </Window>
    
    MainWindow.xaml.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace WpfApp1
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
    
            private void BtnClickP1(object sender, RoutedEventArgs e)
            {
                NavigationService NS = fm.NavigationService;
                NS.Navigate(new Uri("pages/Page1.xaml", UriKind.Relative));
            }
    
            private void BtnClickP2(object sender, RoutedEventArgs e)
            {
                NavigationService NS = fm.NavigationService;
                NS.Navigate(new Uri("pages/Page2.xaml", UriKind.Relative));
            }
    
            private void BtnClickP3(object sender, RoutedEventArgs e)
            {
                NavigationService NS = fm.NavigationService;
                NS.Navigate(new Uri("pages/Page3.xaml", UriKind.Relative));
            }
        }
    }
    


    Monday, August 17, 2020 6:18 PM

All replies

  • One thing that might be of interest is to have common styles in app.xaml as shown here. Then check out XAML reuse resource system and user controls in this post.

    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Monday, August 17, 2020 7:05 PM
  • Thanks Karen.

    But I just want to reuse some XAML code, not  common styles, resource system and user controls. 

    Here is the thing I'd like to reuse.

    <TextBlock  FontSize="20" TextWrapping="Wrap" Text="common info (i.e. xaml code)" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,50,0,0"/>

    Monday, August 17, 2020 10:46 PM
  • Hi JennyLiu001,

    Consider using UserControl.

    This is a document provided by Microsoft, and there is an example in it.

    UserControl Class

    In addition, you can ask questions about WPF in Microsoft Q&A.

    Best Regards,

    Timon


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, August 18, 2020 9:10 AM
  • Please post questions related to WPF in the WPF forums over on Microsoft Q&A.

    Michael Taylor http://www.michaeltaylorp3.net

    Tuesday, August 18, 2020 1:35 PM
  • Thanks, Timon + Cool, for your help.

    Wednesday, August 19, 2020 6:50 PM