在 WPF 网格中,如何阻止 * 列增长到它的邻居?

问题描述 投票:0回答:1

在 HeaderedItemControl 中,我有一个标题网格:

<Grid Margin="0">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="25" />
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="75"/>
    <ColumnDefinition Width="75"/>
    <ColumnDefinition Width="18" />
  <Grid.ColumnDefinitions>

它显示正确,并且当窗口宽度更改时,一个 * 列标题会按预期增长。

项目模板定义了相同的网格。在项目模板中,* 列(第 5 列)内有一个包含 2 列的网格:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="auto" />
  </Grid.ColumnDefinitions>

第 1 列在适当的情况下显示一个图标,如果记录不需要该图标并且似乎表现正常,则第 1 列会折叠。

第 0 列(* 列)包含一个带有内容 TextBlock、TextWrapping="NoWrap" 和 TextTrimming="WordEllipsis" 的标签。

如果标签中的文本很短,则所有内容都会正确显示:文本在第 0 列中左对齐,图标在整个网格列中右对齐。

Proper Alignment

如果文本的长度大于列的宽度,则该列会稍微增长,从而稍微推动其余的列。文本被适当地截断,并添加了省略号,但它侵占了下一栏的一些空间。 Maye 价值 20 像素。

enter image description here

无论文字多长,推送的量都是一样的。我可以阻止这种情况发生,同时保持该列在更宽的屏幕上灵活增长吗?我尝试了各种配置,甚至使用没有网格和图标的单个标签,但仍然存在这个问题。

HeaderedItemsControl XAML:

<HeaderedItemsControl x:Name="ItemsHIC" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"
                      AlternationCount="2" BorderBrush="{StaticResource brush_Logo}" Margin="0,1,0,0"
                      IemsSource="{Binding Path=MyItemView}">

  <HeaderedItemsControl.Template>
    <ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ContentPresenter Grid.Row="0" ContentSource="Header" />

        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden">
          <ItemsPresenter />
        </ScrollViewer>
      </Grid>
    </ControlTemplate>
  </HeaderedItemsControl.Template>

  <HeaderedItemsControl.Header>
    <Grid Margin="0">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25" />
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="75"/>
        <ColumnDefinition Width="75"/>
        <ColumnDefinition Width="18" /> <!-- Accomodates the scroll bar in the items grid. -->
      </Grid.ColumnDefinitions>

      <Border Grid.Column="0" Background="{StaticResource brush_Logo}" Margin="1,0,0,0">
        <Image Source="..\Resources\SomeImage.png" Width="20" Height="20" SnapsToDevicePixels="True" />
      </Border>

      <Label Grid.Column="1" Background="{StaticResource brush_Logo}" Foreground="White" Margin="1,0,0,0" Padding="0" Height="24"
             HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Column 1" />

      <Label Grid.Column="2" Background="{StaticResource brush_Logo}" Foreground="White" Margin="1,0,0,0" Padding="0" Height="24"
             HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Column 2" />

      <Label Grid.Column="3" Background="{StaticResource brush_Logo}" Foreground="White" Margin="1,0,0,0" Padding="0" Height="24"
             HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Column 3" />

      <Label Grid.Column="4" Background="{StaticResource brush_Logo}" Foreground="White" Margin="1,0,0,0" Padding="0" Height="24"
             HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Column 4" />

      <Label Grid.Column="5" Background="{StaticResource brush_Logo}" Foreground="White" Margin="1,0,0,0" Padding="0" Height="24"
             HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Column 5" />

      <Label Grid.Column="6" Background="{StaticResource brush_Logo}" Foreground="White" Margin="1,0,0,0" Padding="0" Height="24"
             HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Column 6" />

      <Label Grid.Column="7" Background="{StaticResource brush_Logo}" Foreground="White" Margin="1,0,0,0" Padding="0" Height="24"
             HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Column 7" />

      <Rectangle Grid.Column="8" Fill="{StaticResource brush_Logo}" Margin="1,0,0,0" /> <!-- Fills header line with color to match, over scroll bar. -->
    </Grid>
  </HeaderedItemsControl.Header>

  <HeaderedItemsControl.ItemTemplate>
    <DataTemplate>
      <Grid x:Name="ItemsGrid" Margin="0,1,0,0" MaxWidth="{Binding ActualWidth, ElementName=ItemsHIC}">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="25" />
          <ColumnDefinition Width="100" />
          <ColumnDefinition Width="100" />
          <ColumnDefinition Width="100" />
          <ColumnDefinition Width="100" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="75" />
          <ColumnDefinition Width="75" />
        </Grid.ColumnDefinitions>

        <!-- Column 0 Record Type Icon -->
        <Image Grid.Column="0" Source="/Resources/TypeIcon.png"
               Width="20" Height="20" SnapsToDevicePixels="True" />

        <!-- Column 1 -->
        <Label Grid.Column="1" BorderThickness="1,0,0,0" Padding="5,0,5,0" BorderBrush="White" Background="Transparent" Height="24"
               HorizontalContentAlignment="Left" VerticalContentAlignment="Center"
               Content="{Binding Column1Data}" />

        <!-- Column 2 -->
        <Label Grid.Column="2" BorderThickness="1,0,0,0" Padding="5,0,5,0" BorderBrush="White" Background="Transparent" Height="24"
               HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
               Content="{Binding Column2Data}" />

        <!-- Column 3 -->
        <Label Grid.Column="3" BorderThickness="1,0,0,0" Padding="5,0,5,0" BorderBrush="White" Background="Transparent" Height="24" 
               HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
               Content="{Binding Column3Data}" />

        <!-- Column 4 -->
        <Label Grid.Column="4" BorderThickness="1,0,0,0" Padding="5,0,5,0" BorderBrush="White" Background="Transparent" Height="24"
               HorizontalContentAlignment="Right" VerticalContentAlignment="Center"
               Content="{Binding Column4Data}" />
                
        <!-- Column 5 with Optional Icon -->
        <Border Grid.Column="5" BorderThickness="1,0,1,0" BorderBrush="White"> <!-- Border makes the background consistent across inner grid. -->
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0" Padding="5,0,5,0" Background="Transparent" MinHeight="24"
                   VerticalContentAlignment="Center" ClipToBounds="True">
              <TextBlock Text="{Binding PotentiallyLongString}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis">
                <TextBlock.ToolTip> <!-- Tooltip is only enabled if the string is trimmed. -->
                  <ToolTip Visibility="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget, Converter={StaticResource trimmedVisibilityConverter}}">
                    <ToolTip.Content>
                      <TextBlock Text="{Binding PotentiallyLongString, Mode=TwoWay}" TextWrapping="Wrap" MaxWidth="250"/>
                    </ToolTip.Content>
                  </ToolTip>
                </TextBlock.ToolTip>
              </TextBlock>
            </Label>

            <Image Grid.Column="1" Source="/Resources/Info.Normal.png" SnapsToDevicePixels="True" Width="16" Height="16"
                   HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,2,0"
                   Visibility="{Binding Path=HasNote, Converter={StaticResource BoolVisibilityCollapse}}">
              <Image.ToolTip>
                <ToolTip MaxWidth="200">
                  <TextBlock Text="{Binding Path=ItemNote}" TextWrapping="Wrap" />
                </ToolTip>
              </Image.ToolTip>
            </Image>
          </Grid>
        </Border>

        <!-- Column 6 -->
        <Label Grid.Column="6" BorderThickness="0,0,1,0" Padding="5,0,5,0" BorderBrush="White" Background="Transparent" MinHeight="24"
               HorizontalContentAlignment="Right" VerticalContentAlignment="Center"
               Content="{Binding Column6Data}"/>

        <!-- Column 7 Management Options -->
        <Border Grid.Column="7" BorderThickness="0,0,1,0" BorderBrush="White">
          <StackPanel Orientation="Horizontal">
            <Button Style="{StaticResource EditButton}" ToolTip="Edit Item" Background="Transparent"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Command="{Binding DataContext.EditCommand, ElementName=ItemsHIC}" CommandParameter="{Binding}"/>

            <Button Style="{StaticResource DeleteButton}" ToolTip="Delete Item" Background="Transparent"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Command="{Binding DataContext.DeleteCommand, ElementName=ItemsHIC}" CommandParameter="{Binding}"/>
          </StackPanel>
        </Border>
      </Grid>

      <DataTemplate.Triggers>
        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
          <Setter Property="Background" Value="WhiteSmoke" TargetName="ItemsGrid" />
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
          <Setter Property="Background" Value="{StaticResource brush_LogoLight}" TargetName="ItemsGrid" />
        </Trigger>
      </DataTemplate.Triggers>
    </DataTemplate>
  </HeaderedItemsControl.ItemTemplate>
</HeaderedItemsControl>
wpf wpf-grid
1个回答
0
投票

您的问题来自于您在 ItemsTemplate 和 Header 中没有使用相同的

ColumnDefnitions
。 ItemTemplate 中的
ColumnDefnitions
缺少最后一个定义,即 18(如标题网格中的那样)。添加
<ColumnDefinition Width="18" />
并且不放置任何该列应该可以解决您的问题。

© www.soinside.com 2019 - 2024. All rights reserved.