后面有相同代码的两个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;
对于您的新问题,您可以浏览VisualTree并将其提取出来。
以下是我对这个话题的一个老答案:VisualTreeHelper
但不要那样做。您希望使用MVVM模式,并将.Text绑定到ModelView的属性,将Button绑定到该ModelView的命令。通过这种方式,您可以更改属性,并通过INotifyPropertyChanged
-更改.Text属性,它将使用新的更改自动更新TextBox。
我写了一篇很容易阅读的MVVM文章,回答了相关的SO问题。它还有按钮命令。不幸的是,这不是WinForms
,所以你必须遵守规则。
使用CommandParamater 实现ViewModel单个命令
我想您可以在Universal
应用程序中共享相同的布局(XAML
)代码,例如对Win
和WP
使用相同的GUI
。但是您将无法为Win
或WP
中的页面共享相同的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