Search code examples
windowsxamlgridwin-universal-appdatatemplate

xaml - allign one control to left, another to right, but take all width of the screen


I have something like this:

<ListBox.ItemTemplate>
        <DataTemplate>
                <StackPanel 
                    Orientation="Horizontal"
                    Margin="2">
                    <Image Width="64" Height="64" Source="{Binding someIcon}"></Image>
                    <StackPanel Orientation="Vertical" Margin="15,1,0,1">
                        <TextBlock Text="{Binding someText}" FontSize="30" />
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Some Text"/>
                            <TextBlock Text="{Binding someText2}"/>
                        </StackPanel>
                    </StackPanel>
                </StackPanel>
                <CheckBox 
                    Content=""
                    Tag="{Binding someName}"
                    IsChecked="{Binding checked}"
                    Checked="someChecked"
                    Unchecked="someUnchecked"/>
         </DataTemplate>
</ListBox.ItemTemplate>

in the ListBox.

I need to allign StackPanel to the left and CheckBox to the right. I need to take all possible screen width and place the CheckBox just at the right edge of the screen. The screen width can change, because it's an Universal Windows App.

How can I do it?

I've tried using RelativePanel and Grid, but without success. When I use Grid with 3 columns like this:

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

I get the CheckBox just after the StackPanel, not at the end of the screen.

When I however use RelativePanel I get CheckBox in place of StackPanel, even though I use RelativePanel.AlignRightWithPanel="True" in CheckBox, RelativePanel.AlignLeftWithPanel="True" in StackPanel and HorizontalAlignment="Stretch" in RelativePanel.

Do you have any ideas?


Solution

  • Try this

    When you do HorizontalContentAlignment to stretch items will take whole ListBox width

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