代码之家 › 专栏 › 技术社区 › CodeWarrior

listboxitem contentpresenter模板中的布局困难

templates layout wpf

CodeWarrior · 技术社区 · 16 年前

很好的一天,

我正在用装运对象填充一个列表框,并使用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的网格,希望它能填满剩余的空间,将最后一列推到右边,但是网格列并不是这样工作的。我还尝试在其中放置一个隐藏的文本块,其中填充空格字符,以尝试使其扩展(希望它继续将自身限制在列表框的宽度内,但也没有效果)。

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

科丽

2 回复 | 直到 16 年前

John Bowen 16 年前

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

在没有看到xaml的其余部分的情况下,我希望您也得到了listboxitems的默认左对齐方式,因此只有*宽度将为您提供相同的行为。您可以通过在父列表框上设置horizontalcontentalignment=“stretch”来解决这个问题(除非您的列表框布局有其他事情没有显示在这里)。

Anvaka 16 年前

好吧,你可以把网格放到另一个网格中,并在外部网格中添加gem HorizontalAlignment="Right" . 例如。:

<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。也许如果你给我们一张照片,我们可以给出更好的解决方案?一幅画值一百字,你知道:)…

干杯,安瓦卡。