asked on

XAML: Layout

I am fairly sure I am missing a trick here.

This is the layout I am trying to replicate

This is where I am upto.

<UserControl x:Class="SAFEPanel.LatestDeal.LatestDeal"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:xpanels="clr-namespace:SAFEPanel.XPanel"
             mc:Ignorable="d" Width="575" Height="239">
    <StackPanel>
        <ItemsControl ItemsSource="{Binding Deals}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Background="AntiqueWhite">
                        <Border BorderBrush="Black" BorderThickness="2" CornerRadius="3" Margin="0,3,0,0">
                            <WrapPanel FlowDirection="RightToLeft">

                                <Grid HorizontalAlignment="Stretch" 
                                      VerticalAlignment="Stretch">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width=".4*"/>
                                        <ColumnDefinition Width=".2*"/>
                                        <ColumnDefinition Width=".4*"/>
                                    </Grid.ColumnDefinitions>

                                    <StackPanel  Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Label x:Name="CompanyName" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                                        <Label x:Name="CandidateName" HorizontalAlignment="Right" Content="{Binding CandidateName}" Width="130" Height="32"/>
                                        <Label x:Name="Startdate" HorizontalAlignment="Left" Content="{Binding Startdate}" Width="130" Height="32"/>
                                        <Label x:Name="Fees" HorizontalAlignment="Left" Content="{Binding Fees}" Width="130" Height="32"/>
                                    </StackPanel>
                                    <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Label x:Name="TitleCompanyName" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Content="Company" Width="130" Height="32"/>
                                        <Label x:Name="TitleCandidateName" HorizontalAlignment="Left" Content="Candidate" Width="130" Height="32"/>
                                        <Label x:Name="TitleStartdate" HorizontalAlignment="Left" Content="Start" Width="130" Height="32"/>
                                        <Label x:Name="TitleFees" HorizontalAlignment="Left" Content="Fees" Width="130" Height="32"/>
                                    </StackPanel>

                                    <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <ItemsControl
                                            ItemsSource="{Binding Contributors}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                            <Grid>
                                                                <Grid.ColumnDefinitions>
                                                                    <ColumnDefinition Width="40"/>
                                                                    <ColumnDefinition Width="40"/>
                                                                </Grid.ColumnDefinitions>
                                                                <Grid.RowDefinitions>
                                                                    <RowDefinition Height="60"/>
                                                                    <RowDefinition Height="18"/>
                                                                </Grid.RowDefinitions>
                                                                <Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  Source="{Binding ImagePathName}" MaxHeight="90" MaxWidth="90"/>
                                                                <Label Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Content="{Binding ContributorName}" Width="130" Height="32"/>
                                                                <Label Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Content="{Binding ContributorPercentage}" Width="130" Height="32"/>
                                                            </Grid>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </StackPanel>
                                </Grid>
                            </WrapPanel>
                        </Border>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</UserControl>

Open in new window

I have tried to use a stackpanel set to horizontal but no luck. any advice is welcome.

Chris Stanyon

Have your tred using a WrapPanel instead of a StackPanel?

Alyanto

ASKER

I have simplified the XAML it but I am still getting the same result. I added a WrapPanel too.

<UserControl x:Class="SAFEPanel.LatestDeal.LatestDeal"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:xpanels="clr-namespace:SAFEPanel.XPanel"
             mc:Ignorable="d" Width="575" Height="239">
    <Grid>
        <ItemsControl ItemsSource="{Binding Deals}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Black" BorderThickness="4" CornerRadius="4">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="80*"/>
                                <ColumnDefinition Width="30*"/>
                                <ColumnDefinition Width="30*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel  Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Label x:Name="CompanyName" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                                <Label x:Name="CandidateName" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                                <Label x:Name="Startdate" HorizontalContentAlignment="Left"  HorizontalAlignment="Left" Content="{Binding Startdate}" Width="130" Height="32"/>
                                <Label x:Name="Fees" HorizontalContentAlignment="Left"  HorizontalAlignment="Left" Content="{Binding Fees}" Width="130" Height="32"/>
                            </StackPanel>
                            <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Label x:Name="TitleCompanyName" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Content="Company" Width="130" Height="32"/>
                                <Label x:Name="TitleCandidateName" HorizontalAlignment="Left" Content="Candidate" Width="130" Height="32"/>
                                <Label x:Name="TitleStartdate" HorizontalAlignment="Left" Content="Start" Width="130" Height="32"/>
                                <Label x:Name="TitleFees" HorizontalAlignment="Left" Content="Fees" Width="130" Height="32"/>
                            </StackPanel>
                            <WrapPanel  Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal">
                                <ItemsControl ItemsSource="{Binding Contributors}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  Source="{Binding ImagePathName}" MaxHeight="110" MaxWidth="110"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </WrapPanel>

                        </Grid>
                    </Border>                    
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>        
    </Grid>
</UserControl>

Open in new window

Chris Stanyon

OK. What you need to do is set th DataTemplate (how each Item is displayed) and a PanelTemplate (how the Items are laid out).

Instead of the WrapPanel you've currently got in place, have a look at this:

<ItemsControl Grid.Column="0" ItemsSource="{Binding Contributors}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
	<ItemsControl.ItemTemplate>
		<DataTemplate>
			<Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  Source="{Binding ImagePathName}" MaxHeight="110" MaxWidth="110" />
		</DataTemplate>
	</ItemsControl.ItemTemplate>

	<ItemsControl.ItemsPanel>
		<ItemsPanelTemplate>
			<WrapPanel Orientation="Horizontal" />
		</ItemsPanelTemplate>
	</ItemsControl.ItemsPanel>
</ItemsControl>

Open in new window

Alyanto

ASKER

I added the code you provided getting the error

Error 3 'System.Windows.Controls.ItemsControl.ItemTemplate' property has already been set and can be set only once. Line 40 Position 38. E:\Users\Angry.Bob\My Documents\Visual Studio 2012\Projects (Bob)\SAFEPanel\SAFEPanel\LatestDeal\LatestDeal.xaml 40 38 SAFEPanel

I removed the second one just to see if there is data returned and if it has in anyway rotated. It still looks the same and unfortunately has not rotated.

        <ItemsControl ItemsSource="{Binding Deals}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Black" BorderThickness="4" CornerRadius="4">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="80*"/>
                                <ColumnDefinition Width="30*"/>
                                <ColumnDefinition Width="30*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel  Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Label x:Name="CompanyName" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                                <Label x:Name="CandidateName" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                                <Label x:Name="Startdate" HorizontalContentAlignment="Left"  HorizontalAlignment="Left" Content="{Binding Startdate}" Width="130" Height="32"/>
                                <Label x:Name="Fees" HorizontalContentAlignment="Left"  HorizontalAlignment="Left" Content="{Binding Fees}" Width="130" Height="32"/>
                            </StackPanel>
                            <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Label x:Name="TitleCompanyName" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Content="Company" Width="130" Height="32"/>
                                <Label x:Name="TitleCandidateName" HorizontalAlignment="Left" Content="Candidate" Width="130" Height="32"/>
                                <Label x:Name="TitleStartdate" HorizontalAlignment="Left" Content="Start" Width="130" Height="32"/>
                                <Label x:Name="TitleFees" HorizontalAlignment="Left" Content="Fees" Width="130" Height="32"/>
                            </StackPanel>


                            <ItemsControl Grid.Column="0" ItemsSource="{Binding Contributors}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  Source="{Binding ImagePathName}" MaxHeight="110" MaxWidth="110" />
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <WrapPanel Orientation="Horizontal">
                                            
                                        </WrapPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Alyanto

ASKER

Hi Chris
That worked great, I added a WrapPanel nesting a StackPanel with the image and label in it. It all works a treat many thanks, Alyanto

Alyanto

ASKER

For the record

The code that is used

                            <ItemsControl Grid.Column="0" ItemsSource="{Binding Contributors}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <!-- this sets up each Item in your list -->
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical"  Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  >
                                            <Image Source="{Binding ImagePathName}" MaxHeight="110" MaxWidth="110" />
                                            <Label HorizontalContentAlignment="Center" Content="{Binding ContributorName}" Width="130" Height="28"/>
                                            <Label HorizontalContentAlignment="Center" Content="{Binding FormattedContributorPercentage}" Width="130" Height="28"/>                                            
                                        </StackPanel>
                                        
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>

                                <!-- this sets up how the Items will be laid out ... in a WrapPanel -->
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>

Open in new window

Chris Stanyon

Looking good :)