Question

美好的一天，

我用Shipment对象填充ListBox，我使用ItemContainerStyle来定义我想要显示的项目。一切都很顺利，只有一个例外。

模板使用位于两个边框内的网格。网格有7列，最后一个指定包含一个边框，最终成为一个发光的宝石来表示活动（不一定是选定的包）。模板设置为扩展到列表框的宽度。我无法弄清楚如何让宝石与容器的右侧对齐。以下是XAML：

<Border Background="#FFFFB78F" Margin="-2,0,0,0">
<Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFCCB0" Offset="0"/>
            <GradientStop Color="#FFFFCCB0" Offset="1"/>
            <GradientStop Color="#FFFCE8DD" Offset="0.5"/>
        </LinearGradientBrush>
    </Border.Background>
    <Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" x:Name="Image"/>
            <ColumnDefinition Width="150" x:Name="Names"/>
            <ColumnDefinition Width="120" x:Name="Address"/>
            <ColumnDefinition Width="120" x:Name="Dates"/>
            <ColumnDefinition  Width="200" x:Name="OtherInfo"/>
            <ColumnDefinition  Width="Auto" />
            <ColumnDefinition Width="30"/>
        </Grid.ColumnDefinitions>
        <Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/>
        <StackPanel Grid.Column="1" Margin="4,4,4,0">
        </StackPanel>
        <StackPanel Grid.Column="2" Margin="4,4,4,0">
            <StackPanel Orientation="Horizontal">
            </StackPanel>
        </StackPanel>
        <StackPanel Grid.Column="3" Margin="4,4,4,0">
        </StackPanel>
        <StackPanel Grid.Column="4" Margin="4,4,4,0">
        </StackPanel>
           <!-- Gem -->
        <Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" d:LayoutOverrides="GridBox">
            <Border.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FF760000" Offset="1"/>
                    <GradientStop Color="Red"/>
                    <GradientStop Color="#FEFF0000" Offset="0.15"/>
                </RadialGradientBrush>
            </Border.Background>
        </Border>
        <Grid Margin="0,0,-298.067,0" VerticalAlignment="Top" Height="13.277" Grid.Column="6" >
        </Grid>
    </Grid>
</Border>

宝石边界朝下。最初我创建了包含一个列设置为Auto的包含网格，希望它可以填充剩余的空间，将最后一列推到右边缘，但是网格列实际上并不是这样。我还尝试在其中放置一个带有空格字符的隐藏文本块来尝试让它扩展（希望它会继续限制自己到列表框的宽度，也无济于事。

我不知所措。任何帮助将不胜感激。

科里

Answer 1

要扩展到剩余空间，您需要将列设置为Width =“*”。 “自动”表示列的大小应适合其内容，其中*表示应填充其父级。

如果没有看到你的XAML的其余部分，我希望你也得到ListBoxItems的默认左对齐，所以只有* width会给你相同的行为。您可以通过在父ListBox上设置HorizontalContentAlignment =“Stretch”来解决这个问题（除非您在此处未显示ListBox布局的其他内容）。

Answer 2

您可以将网格放入另一个网格，并使用HorizontalAlignment="Right"将Gem添加到外部网格中。 E.g：

<Border Background="#FFFFB78F" Margin="-2,0,0,0">
    <Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFCCB0" Offset="0"/>
            <GradientStop Color="#FFFFCCB0" Offset="1"/>
            <GradientStop Color="#FFFCE8DD" Offset="0.5"/>
        </LinearGradientBrush>
    </Border.Background>
   <Grid>
    <Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" x:Name="Image"/>
            <ColumnDefinition Width="150" x:Name="Names"/>
            <ColumnDefinition Width="120" x:Name="Address"/>
            <ColumnDefinition Width="120" x:Name="Dates"/>
            <ColumnDefinition  Width="200" x:Name="OtherInfo"/>
            <ColumnDefinition  Width="Auto" />
            <ColumnDefinition Width="30"/>
        </Grid.ColumnDefinitions>
        <Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/>
        <StackPanel Grid.Column="1" Margin="4,4,4,0">
        </StackPanel>
        <StackPanel Grid.Column="2" Margin="4,4,4,0">
            <StackPanel Orientation="Horizontal">
            </StackPanel>
        </StackPanel>
        <StackPanel Grid.Column="3" Margin="4,4,4,0">
        </StackPanel>
        <StackPanel Grid.Column="4" Margin="4,4,4,0">
        </StackPanel>
        </Grid>
                   <!-- Gem -->
        <Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" >
            <Border.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FF760000" Offset="1"/>
                    <GradientStop Color="Red"/>
                    <GradientStop Color="#FEFF0000" Offset="0.15"/>
                </RadialGradientBrush>
            </Border.Background>
        </Border>
    </Grid>
</Border>
</Border>

但我很确定还有很多其他方法可以改进这个XAML。也许如果你给我们一张照片，我们可以给出更好的解决方案吗？一张价值一百字的图片，你知道:) ...

干杯，安瓦卡。

ListBoxItem ContentPresenter模板中的布局困难

2 个答案: