如何复制'float: right'在XAML

本文关键字：right XAML float 何复制 复制 | 更新日期: 2023-09-27 18:08:31

我想创建一个ListBoxItem，其布局包括两个区域，一个'float: left'和一个'float: right'，项目整体填充分配给ListBox的整个宽度，ListBox填充其容器(即:扩展以填充可用空间)。

如何在XAML中实现这一点?

谢谢

如何复制'float: right'在XAML

对于"项目整体填充分配给ListBox的整个宽度"，您需要这样的样式:

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

和可选的禁用水平滚动列表框:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" .. >
对于DataTemplate的根面板，你可以使用dockpanel: 
<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>

我是这样做的:

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

使用Grid来定位或停靠元素到表单/面板的各个部分。

相关文章：