最佳面板用于显示带有图片和文本的对象数据

时间:2014-10-02 23:51:34

标签: c# wpf

好的,尝试了多种方式似乎没有用。尝试制作一个ListBox.ItemTemplate,但这不能很好,因为我不能让项目水平堆叠!

基本上,我有一个包含数据的Object实例集合,例如First和Last Name。现在我想要一个List Control,它将使用此Collection以下列格式显示信息。

100 x 100背景图片,标签停靠在图像底部,名称为。

示例:

enter image description here

背景图片URL位于对象实例中,名称也是如此。

我当前的代码由于只是垂直堆叠而不起作用,在这种情况下,我也不需要能够选择项目,因为它仅用于显示目的。

<ListBox ItemsSource="{Binding Logged, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource Users}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <DockPanel Width="100" Height="100">
                <DockPanel.Background>
                    <ImageBrush ImageSource="{Binding ThumbLoc}" />
                </DockPanel.Background>
                <Label>
                    <Label.Content>
                        <TextBlock>
                            <TextBlock.Text>
                                <MultiBinding StringFormat="{}{0} {1}">
                                    <Binding Path="FirstName" />
                                    <Binding Path="LastName" />
                                </MultiBinding>
                            </TextBlock.Text>
                        </TextBlock>
                    </Label.Content>
                </Label>
            </DockPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

也可以给你我的Object Class和其中一个实例的声明:

//Logged in users class
public class User
{
    public string ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public Int16 Permissions { get; set; }
    public string ThumbLoc { get; set; }
}

声明:

//User logged in, add data to user object
user.Email = "email@gmail.com";
user.FirstName = "John";
user.LastName = "Johnson";
user.ID = "01";
user.Permissions = 1;

//See if user has a thumbnail picture and save it's location
string thumbLoc = Directory.GetCurrentDirectory() +
    "\\Users\\DisplayPictures\\" +
    user.FirstName + user.LastName + ".png";

if (File.Exists(@thumbLoc))
{
    user.ThumbLoc = thumbLoc;
}
else
{
    user.ThumbLoc = Directory.GetCurrentDirectory() + "\\Users\\DisplayPictures\\user.png";
}

最好的方法吗?

2 个答案:

答案 0 :(得分:1)

我想你可以尝试一下。

我打算睡觉,这就是为什么我无法帮助你的原因。我想你可以处理剩下的事了。 :)

您可以将ListView资源用于带有绑定的DataTemplates。

<ListView x:Name="lst">
        <ListView.Resources>
            <DataTemplate DataType="{x:Type loc:User }">
                <StackPanel Orientation="Vertical">
                    <Image Source="{Binding Path=ThumbLoc}"  Width="100" Height="100" ></Image>
                    <Label Width="100" Content="{Binding Path=Name}" VerticalAlignment="Stretch" Background="Black" VerticalContentAlignment="Center" Foreground="White"></Label>
                </StackPanel>
            </DataTemplate>
        </ListView.Resources>
    </ListView>

创建新的ListViewItem以在该ListView上添加项目。

ListViewItem lw = new ListViewItem();
lw.Content = YOURCLASSWILLCOMEHERE.
lst.Items.Add(lw);

使用ListView,使您的项目可选,可点击,双击,可拖动等......

答案 1 :(得分:1)

  

我也不需要选择要显示的项目   仅用途。

不使用ListBox, 使用不支持选择对象的ItemsControl

  

我目前的代码由于只是垂直堆叠而无效。

将ItemsPanel设置为WrapPanel,方向设置为水平 以激活堆叠项目。

<ItemsControl ItemsSource="{Binding Logged}"
              Style="{StaticResource Users}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <DockPanel Margin="4,0,0,0" Width="100" Height="100">
                <DockPanel.Background>
                    <ImageBrush ImageSource="{Binding ThumbLoc}" />
                </DockPanel.Background>
                <Label>
                    <Label.Content>
                        <TextBlock>
                           <TextBlock.Text>
                              <MultiBinding StringFormat="{}{0} {1}">
                                 <Binding Path="FirstName" />
                                 <Binding Path="LastName" />
                              </MultiBinding>
                           </TextBlock.Text>
                        </TextBlock>
                    </Label.Content>
                </Label>
            </DockPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>