拉伸ListBoxItem样式问题

发布于 2024-09-19 19:22:06 字数 12082 浏览 10 评论 0原文

我在拉伸 ListBoxItem 的内容时遇到问题。我使用带有 GridDataTemplate 将最后一列的内容放在右侧对齐。但我必须在控件的基本样式中设置一些东西来防止这种显示 - “*”(“消耗所有剩余空间”)显示为“自动”(“仅获取您真正需要的内容”)。

所有ListBox的样式:

<Style TargetType="{x:Type ListBox}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}" />
    <Setter Property="BorderBrush" Value="{DynamicResource SolidBorderBrush}" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ListBox}">
              <Grid HorizontalAlignment="Stretch">
                  <Border x:Name="Border" HorizontalAlignment="Stretch"
                          BorderBrush="{TemplateBinding BorderBrush}" 
                          BorderThickness="{TemplateBinding BorderThickness}" />
                  <ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}"
                                Focusable="false" Background="{DynamicResource LightBrush}"
                                x:Name="scrollViewer">
                      <StackPanel Margin="2" IsItemsHost="true" HorizontalAlignment="Stretch" />
                  </ScrollViewer>
              </Grid>
              <ControlTemplate.Triggers>
                  <Trigger Property="IsEnabled" Value="false">
                      <Setter Property="Background"
                              Value="{DynamicResource DisabledBackgroundBrush}" 
                              TargetName="Border" />
                      <Setter Property="BorderBrush"
                              Value="{DynamicResource DisabledBorderBrush}" 
                              TargetName="Border" />
                      <Setter Property="Background"
                              TargetName="scrollViewer" 
                              Value="{DynamicResource DisabledBackgroundBrush}"/>
                  </Trigger>
                  <Trigger Property="IsGrouping" Value="true">
                      <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                  </Trigger>
              </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style d:IsControlPart="True" TargetType="{x:Type ListBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Grid SnapsToDevicePixels="true" HorizontalAlignment="Stretch"  >
                <Border HorizontalAlignment="Stretch" x:Name="Border" Opacity="0.25" 
                        Margin="0,1,0,1" Background="{DynamicResource NormalBrush}" 
                        BorderBrush="{DynamicResource NormalBorderBrush}" 
                        BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" Padding="0,0,0,0" />
                <Rectangle Opacity="0.25" Fill="{DynamicResource LightBrush}" Stroke="{x:Null}" 
                           Height="10.849" Margin="1.153,1.151,1,0" VerticalAlignment="Top" />
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                  Margin="5,2,0,2" x:Name="contentPresenter" />
            </Grid>
            <ControlTemplate.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Selector.IsSelected" Value="True"/>
                        <Condition Property="IsEnabled" Value="False"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource DisabledBackgroundBrush}"/>
                    <Setter Property="BorderBrush" TargetName="Border"
                            Value="{DynamicResource DisabledBorderBrush}"/>
                </MultiTrigger>
                <Trigger Property="IsSelected" Value="true">
                    <Setter Property="Opacity" TargetName="Border" Value="1" />
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource SelectedBackgroundBrush}" />
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True" />
                        <Condition Property="Selector.IsSelected" Value="False" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource MouseOverBrush}" />
                    <Setter Property="Opacity" TargetName="Border" Value="1" />
                </MultiTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Selector.IsSelected" Value="True" />
                        <Condition Property="IsMouseOver" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Opacity" TargetName="Border" Value="0.65" />
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource SelectedBackgroundBrush}" />
                </MultiTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsSelected" Value="true" />
                        <Condition Property="Selector.IsSelectionActive" Value="false" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource SelectedBackgroundBrush}" />
                    <Setter Property="Opacity" TargetName="Border" Value="0.6" />
                </MultiTrigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground"
                            Value="{DynamicResource DisabledForegroundBrush}" />
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource DisabledBackgroundBrush}"/>
                    <Setter Property="BorderBrush" TargetName="Border"
                            Value="{DynamicResource DisabledBorderBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>

我的ListBox

<ListBox Height="220"
         DataContext="{Binding}"
         ItemsSource="{Binding Persons}"
         SelectedItem="{Binding SelectedPerson}"
         VirtualizingStackPanel.VirtualizationMode="Recycling" 
         VirtualizingStackPanel.IsVirtualizing="True"
         ScrollViewer.IsDeferredScrollingEnabled="True" 
         HorizontalAlignment="Stretch"
         HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         ScrollViewer.CanContentScroll="True">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Stretch" 
                  MaxWidth="{Binding RelativeSource={RelativeSource
                                     Mode=FindAncestor,
                                     AncestorType={x:Type ListBox}},
                                     Path=ActualWidth}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" 
                           Width="25" Height="25"
                           Margin="0,0,5,0" 
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Text="{Binding Path=BusinessDataObject.Category}">
                    <TextBlock.Style>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="TextAlignment" Value="Center"/>
                            <Setter Property="FontSize" Value="16"/>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter Property="Background" Value="Transparent"/>
                            <Style.Triggers>
                                <Trigger Property="Text" Value="A">
                                    <Setter Property="Background" Value="Red"/>
                                </Trigger>
                                <Trigger Property="Text" Value="B">
                                    <Setter Property="Background" Value="Orange"/>
                                </Trigger>
                                <Trigger Property="Text" Value="C">
                                    <Setter Property="Background" Value="Blue"/>
                                </Trigger>
                            </Style.Triggers> 
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
                <TextBlock Grid.Row="0"
                           Grid.Column="1" 
                           Margin="0,0,10,0"
                           HorizontalAlignment="Left" 
                           TextWrapping="Wrap"
                           FontWeight="Bold"
                           Text="{Binding Path=BusinessDataObject.FullNameReversed}"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Margin="0,0,10,0"
                           HorizontalAlignment="Left" 
                           Text="{Binding Path=BusinessDataObject.Position}"/>
                <TextBlock Grid.Row="0" Grid.Column="2" Margin="0,0,0,0"
                           HorizontalAlignment="Right"
                           TextAlignment="Left"
                           Text="{Binding Path=BusinessDataObject.Phone}"/>
                <TextBlock Grid.Row="1" Grid.Column="2" Margin="0,0,0,0"
                           HorizontalAlignment="Right"
                           TextAlignment="Left"
                           Text="{Binding Path=BusinessDataObject.Mobile}"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>   
</ListBox>

类别应保留,电话和电话手机应位于右侧,姓名和名称应位于右侧。位置应填满剩余的整个空间。尽管项目在视觉上填充了列表框宽度的空间,但项目内似乎没有“整个”空间。

有人可以帮助我吗?我对此很生气。 :-(

编辑:图片

I have a problem stretching the content of a ListBoxItem. I use a DataTemplate with a Grid to place the content of the last column aligned at the right. But I must have something in the basic style of the controls that prevents this kind of display - the "*" ("consume all the rest of space") displays like "auto" ("take only what you really need").

Style of all ListBoxes:

<Style TargetType="{x:Type ListBox}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}" />
    <Setter Property="BorderBrush" Value="{DynamicResource SolidBorderBrush}" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ListBox}">
              <Grid HorizontalAlignment="Stretch">
                  <Border x:Name="Border" HorizontalAlignment="Stretch"
                          BorderBrush="{TemplateBinding BorderBrush}" 
                          BorderThickness="{TemplateBinding BorderThickness}" />
                  <ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}"
                                Focusable="false" Background="{DynamicResource LightBrush}"
                                x:Name="scrollViewer">
                      <StackPanel Margin="2" IsItemsHost="true" HorizontalAlignment="Stretch" />
                  </ScrollViewer>
              </Grid>
              <ControlTemplate.Triggers>
                  <Trigger Property="IsEnabled" Value="false">
                      <Setter Property="Background"
                              Value="{DynamicResource DisabledBackgroundBrush}" 
                              TargetName="Border" />
                      <Setter Property="BorderBrush"
                              Value="{DynamicResource DisabledBorderBrush}" 
                              TargetName="Border" />
                      <Setter Property="Background"
                              TargetName="scrollViewer" 
                              Value="{DynamicResource DisabledBackgroundBrush}"/>
                  </Trigger>
                  <Trigger Property="IsGrouping" Value="true">
                      <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                  </Trigger>
              </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style d:IsControlPart="True" TargetType="{x:Type ListBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Grid SnapsToDevicePixels="true" HorizontalAlignment="Stretch"  >
                <Border HorizontalAlignment="Stretch" x:Name="Border" Opacity="0.25" 
                        Margin="0,1,0,1" Background="{DynamicResource NormalBrush}" 
                        BorderBrush="{DynamicResource NormalBorderBrush}" 
                        BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" Padding="0,0,0,0" />
                <Rectangle Opacity="0.25" Fill="{DynamicResource LightBrush}" Stroke="{x:Null}" 
                           Height="10.849" Margin="1.153,1.151,1,0" VerticalAlignment="Top" />
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                  Margin="5,2,0,2" x:Name="contentPresenter" />
            </Grid>
            <ControlTemplate.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Selector.IsSelected" Value="True"/>
                        <Condition Property="IsEnabled" Value="False"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource DisabledBackgroundBrush}"/>
                    <Setter Property="BorderBrush" TargetName="Border"
                            Value="{DynamicResource DisabledBorderBrush}"/>
                </MultiTrigger>
                <Trigger Property="IsSelected" Value="true">
                    <Setter Property="Opacity" TargetName="Border" Value="1" />
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource SelectedBackgroundBrush}" />
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True" />
                        <Condition Property="Selector.IsSelected" Value="False" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource MouseOverBrush}" />
                    <Setter Property="Opacity" TargetName="Border" Value="1" />
                </MultiTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Selector.IsSelected" Value="True" />
                        <Condition Property="IsMouseOver" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Opacity" TargetName="Border" Value="0.65" />
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource SelectedBackgroundBrush}" />
                </MultiTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsSelected" Value="true" />
                        <Condition Property="Selector.IsSelectionActive" Value="false" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource SelectedBackgroundBrush}" />
                    <Setter Property="Opacity" TargetName="Border" Value="0.6" />
                </MultiTrigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground"
                            Value="{DynamicResource DisabledForegroundBrush}" />
                    <Setter Property="Background" TargetName="Border"
                            Value="{DynamicResource DisabledBackgroundBrush}"/>
                    <Setter Property="BorderBrush" TargetName="Border"
                            Value="{DynamicResource DisabledBorderBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>

My ListBox:

<ListBox Height="220"
         DataContext="{Binding}"
         ItemsSource="{Binding Persons}"
         SelectedItem="{Binding SelectedPerson}"
         VirtualizingStackPanel.VirtualizationMode="Recycling" 
         VirtualizingStackPanel.IsVirtualizing="True"
         ScrollViewer.IsDeferredScrollingEnabled="True" 
         HorizontalAlignment="Stretch"
         HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         ScrollViewer.CanContentScroll="True">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Stretch" 
                  MaxWidth="{Binding RelativeSource={RelativeSource
                                     Mode=FindAncestor,
                                     AncestorType={x:Type ListBox}},
                                     Path=ActualWidth}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" 
                           Width="25" Height="25"
                           Margin="0,0,5,0" 
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Text="{Binding Path=BusinessDataObject.Category}">
                    <TextBlock.Style>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="TextAlignment" Value="Center"/>
                            <Setter Property="FontSize" Value="16"/>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter Property="Background" Value="Transparent"/>
                            <Style.Triggers>
                                <Trigger Property="Text" Value="A">
                                    <Setter Property="Background" Value="Red"/>
                                </Trigger>
                                <Trigger Property="Text" Value="B">
                                    <Setter Property="Background" Value="Orange"/>
                                </Trigger>
                                <Trigger Property="Text" Value="C">
                                    <Setter Property="Background" Value="Blue"/>
                                </Trigger>
                            </Style.Triggers> 
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
                <TextBlock Grid.Row="0"
                           Grid.Column="1" 
                           Margin="0,0,10,0"
                           HorizontalAlignment="Left" 
                           TextWrapping="Wrap"
                           FontWeight="Bold"
                           Text="{Binding Path=BusinessDataObject.FullNameReversed}"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Margin="0,0,10,0"
                           HorizontalAlignment="Left" 
                           Text="{Binding Path=BusinessDataObject.Position}"/>
                <TextBlock Grid.Row="0" Grid.Column="2" Margin="0,0,0,0"
                           HorizontalAlignment="Right"
                           TextAlignment="Left"
                           Text="{Binding Path=BusinessDataObject.Phone}"/>
                <TextBlock Grid.Row="1" Grid.Column="2" Margin="0,0,0,0"
                           HorizontalAlignment="Right"
                           TextAlignment="Left"
                           Text="{Binding Path=BusinessDataObject.Mobile}"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>   
</ListBox>

Category should be left, Phone & Mobile should be on the right and Name & Position should fill the whole space that is left. It seems to be that there is no "whole" space within the Items although they optically fill the space of the listboxes width.

Could anyone help me? I'm getting mad about this. :-(

Edit: Picture

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

妖妓 2024-09-26 19:22:06

尝试将 ListBoxItem 的 Horizo​​ntalContentAlignment 设置为 Stretch。类似于此链接中的 /a> 除了使用“ListBox”和“ListBoxItem”:

Try setting the HorizontalContentAlignment for the ListBoxItem to Stretch. Something like the one in this link except using "ListBox" and "ListBoxItem":

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文