在数据模板中设置列表框的列宽 [英] Setting column widths for listbox in a data template

问题描述

这是我的Employee类及其集合.

This is my Employee class and its collection.

public class Employee
{
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public bool IsHardWorking { get; set; }
    public string Description { get; set; }
}

List<Employee> Employees = new List<Employee>()
{
    new Employee() { IsHardWorking = false, LastName = "Silly", FirstName = "Dude", Description= "this due is a mess" },
    new Employee() { IsHardWorking = true, LastName = "Mean", FirstName = "Person", Description= "funny" },
    new Employee() { IsHardWorking = false, LastName = "New", FirstName = "Friend", Description= "let her go in next round of layoffs" },
    new Employee() { IsHardWorking = true, LastName = "My", FirstName = "Buddy", Description= "simply no comments" },
};

使用下面显示的数据模板显示数据.

The data is shown using a data template shown below.

<Grid Loaded="DataLoaded">
        <Grid.RowDefinitions>
            <RowDefinition Height="6*" />
            <RowDefinition  />
        </Grid.RowDefinitions>

        <ListBox x:Name="lst1"  Grid.Row="0"  >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="9*" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>


                        <StackPanel Orientation="Vertical" Grid.Column="0" HorizontalAlignment="Left">
                            <StackPanel Orientation="Horizontal">
                                <Label FontFamily="Tahoma" FontSize="12" VerticalAlignment="Bottom" Content="Last Name" />
                                <Label FontFamily="Tahoma" FontSize="18" VerticalAlignment="Bottom" Content="{Binding LastName}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label FontFamily="Tahoma" FontSize="12" VerticalAlignment="Bottom" Content="First Name" />
                                <Label FontFamily="Tahoma" FontSize="18" VerticalAlignment="Bottom" Content="{Binding FirstName}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label FontFamily="Tahoma" FontSize="12" VerticalAlignment="Bottom" Content="Details" />
                                <Label FontFamily="Tahoma" FontSize="18" VerticalAlignment="Bottom" Content="{Binding Description}" />
                            </StackPanel>
                        </StackPanel>

                        <Image Source="{Binding IsHardWorking, Converter={StaticResource valueToImageConverter}}"  Height="50" Grid.Column="1" HorizontalAlignment="Right" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="5" Grid.Row="1" >
            <Button x:Name="btnClose" Content="Close" Margin="5" Width="50"  />
        </StackPanel>

    </Grid>

这是它的外观.

我的问题是我希望图像列应以固定宽度正确对齐.第一列分配了大部分宽度(9 *)，但我不知道如何使其看起来像一列.任何想法

My problem is that I want the image column should be right justified with a fixed width. First column is assigned most of the width (9*) but I don't know how to make it look like a column. Any ideas

更新
实施@FlatEric建议后，下面是我得到的.
我的右侧仍然有很多空白(标有黄色矩形).我尝试将图片的边距"设置为0，但这没有任何改变.

UPDATE
After implementing @FlatEric suggestion, below is what I am getting.
I still have lot of white space on the right side (marked with yellow rectangle). I tried to set Margin to 0 for image but that doesn't change anything.

推荐答案

只需将HorizontalContentAlignment='Stretch'添加到您的ListBox元素.除非您的valueToImageConverter中有不寻常的东西可以工作.不必使用SharedSizeGroup.

Just add HorizontalContentAlignment='Stretch' to your ListBox element. Unless you have something unusual in your valueToImageConverter that should work. It shouldn't be necessary to use SharedSizeGroup.

这篇关于在数据模板中设置列表框的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！