我该怎么做才能不重复 xaml 中的代码？

Question

我已经使用 delphi 一年了，现在我将开发一些 C# UWP。
我已经做了一些工作，我可以看到在我的 XAML 中有大约 1000 行..因为我必须做 10 'Panels' 完全相同，只是改变它们的名字，例如：

<StackPanel Name="Stack1">
    <TextBlock Name="Text1"/>
    <TextBox Name="Box1" 
</StackPanel>
<StackPanel Name="Stack2">
    <TextBlock Name="Text2"/>
    <TextBox Name="Box2" 
</StackPanel>

这只是一个例子，实际上我的代码每行有 100 行 'StackPanel'。

所以..有一种方法可以只做 1 'StackPanel' 并将它用作 class 或 XAML 代码上的东西 10 次使用几行
否则我将不得不写10次用1000行

Answer 1

您始终可以使用良好的旧用户控件。这里我给大家举个例子：

<UserControl
    x:Class="App1.ReusableCode"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <TextBlock Text="SomeText" />
            <TextBlock Text="Some Text 2" />
        </StackPanel>
        <StackPanel Name="stackPanel2" Grid.Row="1">
            <TextBlock Text="SomeText 3" />
            <TextBlock Text="Some Text 4" />
        </StackPanel>
        <StackPanel Name="stackPanel3" Grid.Row="2">
            <TextBlock Text="SomeText 5" />
            <TextBlock Text="Some Text 6" />
        </StackPanel>
        <StackPanel Name="stackPanel4" Grid.Row="3">
            <TextBlock Text="SomeText 7" />
            <TextBlock Text="Some Text 8" />
        </StackPanel>
    </Grid>
</UserControl>

您可以像这样在您的视图中使用它：

<Page
    x:Class="App1.MainPage"
    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:local="using:App1"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <local:ReusableCode x:Name="ucReusableCode" />
    </Grid>
</Page>

如果您的用户控件位于文件夹中，您必须像这样导出它。

xmlns:usercontrol="using:App1.UserControlsFolder"

它在您的页面内 xaml 并且可以这样称呼它：

<Page
    x:Class="App1.MainPage"
    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:local="using:App1"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:usercontrol="using:App1.UserControlsFolder"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <usercontrol:ReusableCode x:Name="ucReusableCode" />
    </Grid>
</Page>

希望这能回答您的问题。

Answer 2

我想你需要的是 ItemsControl, or the controls derived from ItemsControl like ListView。例如这里：

<ItemsControl ItemsSource="{x:Bind itemscontrolCollection}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding MyText}" />
                <TextBox />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

后面的代码：

private ObservableCollection<ItemsControlList> itemscontrolCollection;

public MainPage()
{
    this.InitializeComponent();
    itemscontrolCollection = new ObservableCollection<ItemsControlList>();
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    itemscontrolCollection.Clear();
    for (int i = 1; i <= 100; i++)
    {
        itemscontrolCollection.Add(new ItemsControlList { MyText = "Text" + i });
    }
}

我的ItemsControlListclass:

public class ItemsControlList
{
    public string MyText { get; set; }
}

我不知道为什么要给StackPanel、TextBlock和TextBox设置名字，你可以使用data binding给依赖属性设置值每个控件。

你可以查看官方ListView and GridView sample to check how to use ListView in UWP app. And you can also refer to UI basics (XAML) sample，找到更适合你场景的控件

我该怎么做才能不重复 xaml 中的代码？

What can I do to not repeat code in xaml?

win-universal-app

uwp

windows-10-universal

uwp-xaml