Как я могу воспроизвести 'float: right' в XAML?

Question

Я хочу создать ListBoxItem с макетом, который включает в себя две области, одну 'float: left' и одну 'float: right', с элементом, полностью заполняющим всю ширину, выделенную ListBox, и ListBox, заполняющим его контейнер (т.е. расширение для заполнения доступного пространства).

Как мне добиться этого в XAML?

спасибо

Answer 1

Для " элемента, заполняющего всю ширину, выделенную для ListBox ", вам нужен такой стиль:

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

и дополнительно отключить горизонтальную прокрутку для списка:

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

для корневой панели DataTemplate вы можете использовать панель ввода:

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

или сетка:

<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>

Answer 2

Вот как бы я это сделал:

    <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>

Answer 3

Используйте Grid для размещения или закрепления элементов в различных частях формы / панели.