Question

我试图建立一个简单的＆＃39;窗口涉及许多不同的控制。

我遇到的问题是我只完成了10％，而我的XAML编码已经占用了很多行。按照不重复代码的概念，我想知道是否有更有效的方法来保持我的代码干净，整洁和高效。

是否有类似资源词典或类的解决方案？

提前致谢！

这是我的XAML代码：

<Window
        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" mc:Ignorable="d" x:Class="League_of_Legends_Alpha_1_0.MainWindow"
        Title="MainWindow" Height="446" Width="1366">
    <Grid Background="Black" ShowGridLines="False">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="73*"></ColumnDefinition>
            <ColumnDefinition Width="42*"/>
            <ColumnDefinition Width="166*"/>
            <ColumnDefinition Width="269*"></ColumnDefinition>
            <ColumnDefinition Width="270*"></ColumnDefinition>
            <ColumnDefinition Width="270*"></ColumnDefinition>
            <ColumnDefinition Width="269*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="34*" MaxHeight="34"/>
            <RowDefinition Height="32*" MaxHeight="32"/>
            <RowDefinition Height="32*" MaxHeight="32"/>
            <RowDefinition Height="20*"/>
            <RowDefinition Height="19"/>
            <RowDefinition Height="20*"/>
            <RowDefinition Height="19*"/>
            <RowDefinition Height="32*"/>
            <RowDefinition Height="34*" MaxHeight="34"/>
            <RowDefinition Height="142*"/>
            <RowDefinition Height="31*"/>
        </Grid.RowDefinitions>
        <Viewbox Stretch="Uniform" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
            <Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
        </Viewbox>
        <Viewbox Stretch="Uniform" Grid.Column="3" Grid.Row="0">
            <Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
        </Viewbox>
        <Viewbox Stretch="Uniform" Grid.Column="4" Grid.Row="0">
            <Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
        </Viewbox>
        <Viewbox Stretch="Uniform" Grid.Column="5" Grid.Row="0">
            <Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
        </Viewbox>
        <Viewbox Stretch="Uniform" Grid.Column="6" Grid.Row="0">
            <Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
        </Viewbox>
        <Viewbox Stretch="Uniform" Grid.Column="3" Grid.Row="3">
            <Label Content="Summoner Name - Champion Name - Summoner Level"></Label>
        </Viewbox>
        <Viewbox Stretch="Uniform" Grid.Column="4" Grid.Row="3">
            <Label Content="Summoner Name - Champion Name - Summoner Level"></Label>
        </Viewbox>
        <Viewbox Stretch="Uniform" Grid.Column="5" Grid.Row="3">
            <Label Content="Summoner Name - Champion Name - Summoner Level"></Label>
        </Viewbox>
        <Viewbox Stretch="Uniform" Grid.Column="6" Grid.Row="3">
            <Label Content="Summoner Name - Champion Name - Summoner Level"></Label>
        </Viewbox>
        <Image HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Margin="5,0,5,0" Height="64" VerticalAlignment="Top" Width="64" Source="Blank.png" />
        <Image HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1" Height="32" VerticalAlignment="Top" Width="32" Source="Blank.png" Margin="5,0,0,0"/>
        <Image HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1" Height="32" VerticalAlignment="Top" Width="32" Source="Blank.png" Margin="5,0,0,0"/>
        <Image Grid.Column="1" HorizontalAlignment="Left" Height="32" Margin="5,3,0,0" Grid.Row="3" Grid.RowSpan="2" VerticalAlignment="Top" Width="32" Source="Blank.png"/>








        <Viewbox Grid.Column="2" Grid.Row="1" Stretch="UniformToFill">
            <Label Content="Runes" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="White" Width="166" Height="31" FontWeight="Bold"/>
        </Viewbox>
        <Viewbox Grid.Column="2" Grid.Row="2" Stretch="Fill">
            <Label Content="Masteries: 21/0/9" Grid.Column="2" HorizontalAlignment="Left" Height="32" Grid.Row="2" VerticalAlignment="Top" Width="166" Foreground="White" HorizontalContentAlignment="Center" FontWeight="Bold"/>
        </Viewbox>
        <Label Content="Challenger IV (100LP)" Grid.Column="2" HorizontalAlignment="Left" Grid.Row="3" VerticalAlignment="Top" Width="161" Foreground="White" FontSize="9" FontWeight="Bold"/>
        <Label Content="K/D/A" HorizontalAlignment="Left" Grid.Row="3" VerticalAlignment="Top" Width="73" Foreground="White" FontSize="9" FontWeight="Bold"/>
        <Label Content="Label" HorizontalAlignment="Left" Margin="10,5,0,0" Grid.Row="4" VerticalAlignment="Top"/>
        <Label Content="Games: 10000" HorizontalAlignment="Left" Height="19" Grid.Row="4" VerticalAlignment="Top" Width="73" Foreground="White" FontSize="8.5" FontWeight="Bold"/>
        <Label Content="Win Ratio:" HorizontalAlignment="Left" Height="20" Grid.Row="5" VerticalAlignment="Top" Width="73" Foreground="White" FontSize="9" FontWeight="Bold"/>
        <Label Content="Last Season: Challenger IV (100LP)" Grid.Column="2" HorizontalAlignment="Left" Height="20" Grid.Row="5" VerticalAlignment="Top" Width="166" FontSize="8.5" Background="Black" Foreground="White" Margin="0,1,0,0" Grid.RowSpan="2" FontWeight="Bold"/>
        <Label Content="Promotion Series: 3W/1L" Grid.Column="2" HorizontalAlignment="Left" Grid.Row="4" VerticalAlignment="Top" Width="166" Foreground="White" FontSize="8.5" Height="19" FontWeight="Bold"/>
        <Label Content="100.5%" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="5" VerticalAlignment="Top" Height="20" Width="42" Foreground="White" FontSize="9" FontWeight="Bold"/>
        <Label Content="Normal Wins:" HorizontalAlignment="Left" Grid.Row="6" VerticalAlignment="Top" Width="73" Foreground="White" FontSize="8" FontWeight="Bold"/>
        <Label Content="10000" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="6" VerticalAlignment="Top" Height="19" Width="42" Foreground="White" FontSize="8" FontWeight="Bold"/>
        <Label Content="OP.GG" Grid.Column="2" HorizontalAlignment="Left" Grid.Row="6" VerticalAlignment="Top" Width="168" Foreground="White" FontSize="8" Grid.ColumnSpan="2" FontWeight="Bold"/>
        <!--
        <Border Grid.Column="0" Grid.RowSpan="2" BorderBrush="Aqua" BorderThickness="5" CornerRadius="8"/>
        -->
    </Grid>

</Window>

EDIT /解答：

我最初做的是创建一个ResoureDictionary并添加一个带网格的datatemplate。

    <DataTemplate x:Key="myDataTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="4*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
    </grid>

然后在我的主窗口中，我使用ContentControl将datatemplate绑定到我的网格。

    <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="32"/>
        <RowDefinition/>
        <RowDefinition Height="32"/>
        <RowDefinition/>
        <RowDefinition Height="32"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="0" Grid.Row="1"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="1" Grid.Row="1"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="2" Grid.Row="1"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="3" Grid.Row="1"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="4" Grid.Row="1"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="0" Grid.Row="3"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="1" Grid.Row="3"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="2" Grid.Row="3"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="3" Grid.Row="3"></ContentControl>
    <ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="4" Grid.Row="3"></ContentControl>
</Grid>

对于像我这样刚接触WPF的人，你还需要引用资源（因为我使用了资源字典）

    <Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="MainDataTemplateDictionary.xaml">
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Answer 1

我认为你最好使用带有数据绑定模板的ItemsControl ......就像这样。

<ItemsControl ItemsSource="{Binding MyCollection}" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
           <Viewbox Stretch="Uniform">
            <!-- note that this requires a bindable property "SummonerDescription" in your viewmodel that combines the summoner name, champion name and summoner level -->
            <Label Content="{Binding SummonerDescription}" Foreground="White"></Label>
        </Viewbox>

        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

有关itemscontrols和数据绑定的更多信息，请查看here

在这种情况下，您可能希望将ItemsControl与UserControl合并，以便在表格中呈现单个“行”（或列？）。

Answer 2

用于声明相同元素的重复属性值，例如

<Grid>
    <Viewbox Stretch="Uniform" x:Name="viewBox1">
    <Viewbox Stretch="Uniform" x:Name="viewBox2">
    <Viewbox Stretch="Uniform" x:Name="viewBox3">
</Grid>

您可以将“全局”定义为父级（或前级）容器中的样式，例如

<Grid>
    <Grid.Resources>
        <Style TargetType="ViewBox">
            <Setter Property="Stretch" Value="Uniform"/>
        </Style>
    </Grid.Resources>
    <Viewbox x:Name="viewBox1">
    <Viewbox x:Name="viewBox2">
    <Viewbox x:Name="viewBox3">
</Grid>

随后，您可以覆盖您想要的特定元素。

<Grid>
    <Grid.Resources>
        <Style TargetType="ViewBox">
            <Setter Property="Stretch" Value="Uniform"/>
        </Style>
    </Grid.Resources>
    <Viewbox x:Name="viewBox1">
    <Viewbox x:Name="viewBox2" Stretch="Fill">
    <Viewbox x:Name="viewBox3">
</Grid>

WPF：控制组织

2 个答案: