WPF: Organisation of Controls

Question

I'm trying to establish a 'simple' window which involves many different controls.

The issue I'm encountering is that I'm only 10% done and my XAML coding already takes up many lines. Going by the concept of not repeating code, I'm wondering if there is a more efficient method to keep my code clean, neat and efficient.

Is there a solution similar to resource dictionaries or classes?

Thanks in Advance!

Here is my XAML Code:

<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/ANSWER:

What I first did was create a ResoureDictionary and added a datatemplate with a grid.

    <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>

Then in my main window, I bound the datatemplate to my grid using ContentControl.

    <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>

Also for those who are new to WPF like me, you also need to reference the Resource (as I used a resource dictionary)

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

Answer 1

I think you're better off using an ItemsControl with a databound template... something like this.

<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>

For more info on itemscontrols and databinding, look here

In this case, you might want to combine the ItemsControl with a UserControl that renders a single "row" (or column?) in your table.

Answer 2

For declaring repeating property values of the same element e.g.

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

You can define once 'globally' as a style in the parent(or preceding levels) container e.g.

<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>

Subsequently, you may override the specific element(s) you desire e.g.

<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>