Custom Windows Phone user control

Question

I'm developing a custom ListBox item template and so far wrote this code:

<UserControl x:Class="Application.Test"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Image HorizontalAlignment="Right" Height="100" Grid.RowSpan="2" Grid.Column="1" VerticalAlignment="Center" Width="100" Source="ControlTemplates\arrow_white.png"/>
    <TextBlock Name="Title" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0" Height="auto" Width="auto" Grid.ColumnSpan="2" Margin="10,212,119,214"/>
</Grid>

Link to picture sample: http://s7.postimg.org/oeyl8gge3/Capture2.png

I want to make this ListBoxItem 200 px, but all content - rubber ( to support both orientations )

When i try to change d:DesignHeight="480" d:DesignWidth="480" to 200px it makes the ListBoxItem 200px but text dissapers...

What am i doing wrong?

Toni Petrina Toni Petrina · Accepted Answer · 2013-07-05T15:17:37

You need to reverse the column definitions:

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

This way right column will have fixed size since it is automatically resized to accommodate the Image control with fixed width. And the first column will now always stretch to use all space.

However, this is not enough. Each individual list box item has its own width. To ensure that each item has maximum width, use the following code:

<ListBo>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Custom Windows Phone user control

1 Answers