drumkit-old/DrumKit/UI/Settings/DrumsSettingsControl.xaml

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

    <UserControl.Resources>
        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Common/TextButtonStyles.xaml" />
            </ResourceDictionary.MergedDictionaries>


            <DataTemplate x:Key="DrumsListDataTemplate">
                <Grid Name="theGrid"
                      MinWidth="380">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <!-- Left thing -->
                    <Border Name="yellowBorder"
                            Grid.Column="0" Grid.RowSpan="3" 
                            Background="Yellow" Width="10" />

                    <!-- Thumbnail -->
                    <Image Grid.Row="0" Grid.RowSpan="2"
                            Grid.Column="2"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Width="60" Height="60"
                            Source="{Binding LoadedImageSource}" 
                            Stretch="Uniform" />

                    <!-- Name -->
                    <TextBox Grid.Column="1" Grid.Row="0" Margin="15,2,15,0"
                           FontSize="15.3"
                           Style="{StaticResource MyTextBoxStyle}" 
                           Text="{Binding Name}"
                           IsReadOnly="True" />

                    <!-- Configuration -->
                    <Grid 
                        Grid.Column="1" Grid.Row="1" Margin="15,0,15,2">
                        
                        <Grid.ColumnDefinitions>
                            
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                            
                        </Grid.ColumnDefinitions>
                        
                        <ToggleButton 
                            Name="toggleEnabled" Grid.Column="0"
                            Margin="0,-4,20,0" Padding="5,1"
                            Content="Visible" 
                            Click="ToggleEnabled_Click" />
                        
                        <TextBlock 
                            Grid.Column="1"
                            Style="{StaticResource TitleTextStyle}" 
                            Text="Key:" />
                        
                        <TextBox 
                            Grid.Column="2"
                            Name="textKey"
                            Style="{StaticResource MyTextBoxStyle}"
                            KeyUp="TextKey_KeyUp" />

                    </Grid>

                    <Grid Grid.Column="1" Grid.Row="2" Margin="15,2,15,0">
                        
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <TextBlock 
                            Grid.Column="0"
                            Style="{StaticResource TitleTextStyle}" 
                            Text="Volume left:" />

                        <Slider Name="sliderVolumeL"
                                Grid.Column="1"
                                Margin="5,-8,5,0"
                                Height="34"
                                Minimum="0" Maximum="1"
                                StepFrequency=".01"
                                ValueChanged="sliderVolumeL_ValueChanged"/>

                        <TextBlock 
                            Margin="10,0,0,0"
                            Grid.Column="2"
                            Style="{StaticResource TitleTextStyle}" 
                            Text="Right:" />

                        <Slider Name="sliderVolumeR"
                                Grid.Column="3"
                                Margin="5,-8,5,0"
                                Height="34"
                                Minimum="0" Maximum="1"
                                StepFrequency=".01" 
                                ValueChanged="sliderVolumeR_ValueChanged" />

                    </Grid>
                    
                </Grid>

            </DataTemplate>

            <Style x:Key="GridViewStretchItemStyle" TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>

        </ResourceDictionary>

    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- Drums list -->
        <GridView Name="listDrums" 
                  Grid.Row="0" Grid.Column="0"
                  ItemTemplate="{StaticResource DrumsListDataTemplate}"
                  ItemContainerStyle="{StaticResource GridViewStretchItemStyle}" 
                  SelectionMode="Single" >
            <local:Drum ImageSource="/Assets/bg.png" Id="adda" Name="Hello world!" />
        </GridView>

        <!-- Buttons -->
        <!--<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal">
            <Button Style="{StaticResource MyButtonStyle}" Click="ButtonCreate_Click">Create</Button>
            <Button Style="{StaticResource MyButtonStyle}" Click="ButtonDelete_Click">Delete</Button>
        </StackPanel>-->

    </Grid>

</UserControl>