ListBox 与 DockPanel 对齐答案

【问题标题】：ListBox with DockPanel AlignmentListBox 与 DockPanel 对齐
【发布时间】：2013-07-08 14:41:05
【问题描述】：

我有一个listbox，我在其中每行传递 5 个项目。 xml文件：

<ListBox x:Name="DatabaseBox">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
    <DataTemplate>
            <DockPanel">
                <Image x:Name="ToggleFavoriteImage" Width="15" Height="15" Tag="{Binding Tag}" Source="{Binding ImageSource}" MouseLeftButtonDown="ToggleFavoriteImage_MouseLeftButtonDown"/>
                <TextBlock x:Name="ListBoxSName" Width="220" Text="{Binding Name}" Margin="30,0,0,0" FontSize="11" MouseLeftButtonDown="ListBoxSName_MouseLeftButtonDown"/>
                <Button x:Name="ListBoxSCoyntry" Height="17" Content="{Binding City}" FontSize="11" Click="ListBoxSCity_Click"/>
                <Button x:Name="ListBoxSCity"  Height="17" Content="{Binding Genre}" FontSize="11" Click="ListBoxSGenre_Click"/>
                <Button x:Name="ListBoxSGenre" Height="17" Content="{Binding Country}" FontSize="11" Click="ListBoxSCountry_Click"/>
            </DockPanel>
    </DataTemplate>
</ListBox.ItemTemplate>
    
</ListBox>

我想要做的是让Image 和TextBlock 停靠在左侧，而所有其他人并排停靠在右侧。我为所有Buttons 尝试了DockPanel.Dock ="Rigth"，但事情变得非常混乱。

有人有想法吗？

【问题讨论】：

标签： c# wpf listbox dockpanel

【解决方案1】：

使用Grid，DockPanel 不是很好的控制。还有Grids 有size-sharing，这对于项目控件通常很有用。

【讨论】：

【解决方案2】：

将每个视觉组包装在堆栈面板中并将停靠应用到堆栈面板，如下所示：

<DockPanel>
    <StackPanel DockPanel.Dock="Left">
         <Image x:Name="ToggleFavoriteImage" Width="15" Height="15" Tag="{Binding Tag}" Source="{Binding ImageSource}" MouseLeftButtonDown="ToggleFavoriteImage_MouseLeftButtonDown"/>
         <TextBlock x:Name="ListBoxSName" Width="220" Text="{Binding Name}" Margin="30,0,0,0" FontSize="11" MouseLeftButtonDown="ListBoxSName_MouseLeftButtonDown"/>
    </StackPanel>
    <StackPanel DockPanel.Dock="Right">
         <Button x:Name="ListBoxSCoyntry" Height="17" Content="{Binding City}" FontSize="11" Click="ListBoxSCity_Click"/>
         <Button x:Name="ListBoxSCity"  Height="17" Content="{Binding Genre}" FontSize="11" Click="ListBoxSGenre_Click"/>
         <Button x:Name="ListBoxSGenre" Height="17" Content="{Binding Country}" FontSize="11" Click="ListBoxSCountry_Click"/>
    </StackPanel>
</DockPanel>

【讨论】：

这几乎是完美的。唯一的问题是，即使它们现在停靠在左右，它们在右侧留下了巨大的空白。
使用DockPanel.Dock="Fill" 其中之一，因为它将使用剩余的所有可用空间。在这种情况下，请注意HorizontalAlignment
效果很好。谢谢你。我决定不关注 StackPanel。我是这样做的：第一个按钮：DockPanel.Dock="Right" 第二个按钮：DockPanel.Dock="Right" 第三个按钮：HorizontalAlignment="Right"。以及 DockPanel 中的所有项目。
只注意按钮的顺序