How can I replicate 'float: right' in XAML?

Question

I want to create a ListBoxItem with a layout that includes two areas, one 'float: left' and one 'float: right', with the item overall filling the entire width allocated to the ListBox and the ListBox filling its container (ie. expanding to fill the available space).

How can I achieve this in XAML?

thanks

You can use a table or grid component for that, set one or both columns to auto-size. — Ben Voigt, Sep 14 '11 at 18:07

score 9 · Accepted Answer · answered Sep 14 '11 at 21:39

For the "item overall filling the entire width allocated to the ListBox" you need a style like this:

<Style TargetType="ListBoxItem">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>

and optionally disable horizontal scrolling for the listbox:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" .. >

for the DataTemplate's root panel you can either use a dockpanel:

<DockPanel>
  <SomeControlLeft DockPanel.Dock="Left" Margin="0 0 5 0" />
  <SomeControlRight DockPanel.Dock="Right" Margin="5 0 0 0" />
  <SomeControlFill />
</DockPanel>

or a grid:

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

  <SomeControlLeft Grid.Column="0" />
  <SomeControlRight Grid.Column="4" />
  <SomeControlFill Grid.Column="2" />
</Grid>

Thanks for this, you got me on my way to achieving what I was looking for. — MalcomTucker, Sep 15 '11 at 21:45

score 1 · Answer 2 · answered Sep 15 '11 at 14:33

This is the way I would do it:

    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="Red">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock Text="{TemplateBinding Content}"/>
                        <TextBlock Text="{TemplateBinding Tag}" Grid.Column="1"/>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

    <ListBox ItemContainerStyle="{StaticResource ListBoxItemStyle}">
        <ListBoxItem Content="Lorem" Tag="Ipsum"/>
        <ListBoxItem Content="Hello" Tag="World"/>
        <ListBoxItem Content="Be" Tag="Happy"/>
    </ListBox>

</Grid>

score 0 · Answer 3 · answered Sep 14 '11 at 18:36

0

Use a Grid to position or dock elements to various parts of the form/panel.

answered Sep 14 '11 at 18:36

qJake

16,821
17
83
135

can you use a grid in a listbox item template? – MalcomTucker Sep 14 '11 at 18:51
The beauty of XAML is that you can use almost anything inside of almost anything else. If you have to ask that question, the answer (about 99% of the time) is always going to be a resounding **YES**. – qJake Sep 14 '11 at 18:53
Ok thanks. I'm new to XAML - if you have moment could you provide a code sample? Just a skeleton would be great! Thanks – MalcomTucker Sep 14 '11 at 18:59
1

Sorry, I use Expression Blend to do all my XAML at this point, it's all drag-and-drop UI editing, so unfortunately I can't. Just read the MSDN page and google "XAML Grid" to get various tutorials and examples. Take the initiative, teach yourself, read as much as you can! :) – qJake Sep 14 '11 at 19:12

How can I replicate 'float: right' in XAML?

3 Answers3