Сложности компоновки в шаблоне ListBoxItem ContentPresenter - PullRequest
Новая
       11

Сложности компоновки в шаблоне ListBoxItem ContentPresenter

0 голосов
/ 25 февраля 2010

Добрый день,

Я заполняю 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>

Граница драгоценного камня направлена ​​вниз. Первоначально я создал содержащую сетку со столбцом, установленным на Авто, в надежде, что он заполнит оставшееся пространство, переместив последний столбец к правому краю, но столбцы сетки на самом деле не работают таким образом. Я также попытался поместить туда скрытый текстовый блок, заполненный пробелами, чтобы попытаться расширить его (надеясь, что он будет продолжать ограничиваться шириной списков, что также не помогло.

Я в растерянности. Любая помощь будет принята с благодарностью.

Cory

Ответы [ 2 ]

3 голосов
/ 25 февраля 2010

Для расширения до оставшегося места вам нужен столбец с Width = "*". Авто указывает, что размер столбца должен соответствовать его содержимому, где * означает, что он должен заполнить своего родителя.

Не видя остальной части вашего XAML, я ожидаю, что вы также получаете выравнивание по умолчанию для ваших ListBoxItems, так что только ширина * даст вам такое же поведение. Это можно исправить, установив HorizontalContentAlignment = "Stretch" в родительском ListBox (если только у вас нет других действий с макетом ListBox, не показанным здесь).

0 голосов
/ 25 февраля 2010

Хорошо, вы можете поместить сетку в другую сетку и добавить Gem во внешнюю сетку с помощью HorizontalAlignment="Right". 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. Может быть, если вы дадите нам картину, мы могли бы дать лучшее решение? Знаешь, одна картинка стоит сто слов ...) ...

Ура, Анвака.

...