后面有相同代码的两个XAML页

本文关键字:两个 XAML 代码 | 更新日期: 2023-09-27 18:27:02

我正在创建一个Windows通用应用程序(WinRT和WP8.1)。我想要的是让用户在同一页面的两种不同布局之间进行选择。下面是的简单表示。我想找到最简单、最懒惰的方法(我知道我可以只创建两个页面,但一定有更好的方法。)我已经创建了1个页面(500行C#代码用于处理控件交互),现在需要添加第二个布局。这两个布局具有完全相同的功能,控件具有相同的名称,只是排列不同。

在安卓系统中,我可以做到:

if(IsLayout1Selected)
    setContentView(R.layout.activity_d2p_layout1);
else
    setContentView(R.layout.activity_d2p_layout2);

提前感谢您的帮助!

布局1:

<Page x:Name="d2pPageLayout1"
x:Class="_MyApp.D2P"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:_MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Unloaded="PageUnloaded" Loaded="PageLoaded"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid x:Name="mainGrid">
        <Button x:Name="button1" VerticalAlignment="Top" Click="buttonClick"/>
        <TextBlock x:Name="textblock1" Text="Hello"/>
        <!-- Of course there are a lot more elements and they have many layout properties that differ -->
    </Grid>
</Page>

布局2:

<Page x:Name="d2pPageLayout2"
x:Class="_MyApp.D2P"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:_MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Unloaded="PageUnloaded" Loaded="PageLoaded"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid x:Name="mainGrid">
        <Button x:Name="button1" VerticalAlignment="Bottom" Click="buttonClick"/>
        <TextBlock x:Name="textblock1" Text="Hello"/>
        <!-- Of course there are a lot more elements and they have many layout properties that differ -->
    </Grid>
</Page>

代码隐藏(与布局1和布局2相同):

namespace _MyApp
{
    public sealed partial class D2P : Page
    {
    public D2P()
        {
            this.InitializeComponent();
        }
    private void PageLoaded(object sender, RoutedEventArgs e)
        {
            // do stuff here
        }
    private void PageUnloaded(object sender, RoutedEventArgs e)
        {
            // do some other stuff here
        }
    private void buttonClick(object sender, RoutedEventArgs e)
        {
            // handle buttonClick here
            // a lot of this code also references the controls directly e.g.
            textblock1.Text = "Button 1 was clicked";
        }
    }
}

编辑:

多亏了Akshay Soam的提示,我通过使用DataTemplate和ContentControl非常接近我想要的,但现在这导致了另一个问题,破坏了我的代码。我的代码直接访问了很多元素。示例:

textblock1.Text = "Button 1 was clicked";

由于我的整个页面内容现在都封装在DataTemplate中,我无法再访问这些元素。我该怎么做?

目前的实施方式是:

XAML:

<Page.Resources>
    <DataTemplate x:Key="template1">
        <Button x:Name="button1" VerticalAlignment="Bottom" Click="buttonClick"/>
        <TextBlock x:Name="textblock1" Text="Hello"/>
    </DataTemplate>
</Page.Resources>
<ContentControl x:Name="contentControl" Content="{Binding}"/>

代码隐藏:

contentControl.ContentTemplate = template1;
this.DataContext = template1;

后面有相同代码的两个XAML页

对于您的新问题,您可以浏览VisualTree并将其提取出来。

以下是我对这个话题的一个老答案:VisualTreeHelper


但不要那样做。您希望使用MVVM模式,并将.Text绑定到ModelView的属性,将Button绑定到该ModelView的命令。通过这种方式,您可以更改属性,并通过INotifyPropertyChanged-更改.Text属性,它将使用新的更改自动更新TextBox。


我写了一篇很容易阅读的MVVM文章,回答了相关的SO问题。它还有按钮命令。不幸的是,这不是WinForms,所以你必须遵守规则。

使用CommandParamater 实现ViewModel单个命令

我想您可以在Universal应用程序中共享相同的布局(XAML)代码,例如对WinWP使用相同的GUI。但是您将无法为WinWP中的页面共享相同的UI代码。

在通用Windows应用程序中使用XAML控件的提示和技巧

您可以为同一页面构建多个xaml,如下所示:我为不同屏幕大小的为同一主页构建了8个xaml

public sealed partial class MainPage : Page
{

    public MainPage()
    {
        Rect bounds = ApplicationView.GetForCurrentView().VisibleBounds;
        double scaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
        Size size = new Size(bounds.Width * scaleFactor, bounds.Height * scaleFactor);

        string resourceName;
        if (size.Width >= 1920 && size.Height >= 1080) resourceName = "ms-appx:///MainPage.layout-1920x1080.xaml";
        else if (size.Width >= 1680 && size.Height >= 1050) resourceName = "ms-appx:///MainPage.layout-1680x1050.xaml";
        else if (size.Width >= 1600 && size.Height >= 1200) resourceName = "ms-appx:///MainPage.layout-1600x1200.xaml";
        else if (size.Width >= 1360 && size.Height >= 768) resourceName = "ms-appx:///MainPage.layout-1360x768.xaml";
        else if (size.Width >= 1280 && size.Height >= 1024) resourceName = "ms-appx:///MainPage.layout-1280x1024.xaml";
        else if (size.Width >= 1024 && size.Height >= 768) resourceName = "ms-appx:///MainPage.layout-1024x768.xaml";
        else if (size.Width >= 720 && size.Height >= 480) resourceName = "ms-appx:///MainPage.layout-720x480.xaml";
        else resourceName = "ms-appx:///MainPage.layout-640x480.xaml";
        this.InitializeComponent(new Uri(resourceName, UriKind.Absolute));
    }

}

}

这些是您可以在场景中使用的代码的链接
https://developer.microsoft.com/en-us/windows/iot/samples/digitalsign

https://github.com/ms-iot/samples/tree/develop/DigitalSign