3

Margaret Parsons の記事に基づいて、DataGrid アングル ヘッダー スタイルを作成しています。現在、次のようになっています。

<Style x:Key="DataGridColumnHeaderAngle" 
       TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
          <Grid x:Name="HeaderGrid" ShowGridLines="True" 
              Width="30">
            <Rectangle Name="HeaderRect" Fill="Azure" Stroke="Black" 
                       Width="{TemplateBinding Width}"
                       Height="{TemplateBinding Height}">
              <Rectangle.RenderTransform>
                <SkewTransform CenterX="0" AngleX="-60" AngleY="0"
                     CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                              Path=ActualHeight }"/>
                </Rectangle.RenderTransform>
            </Rectangle>

            <TextBlock Text="{TemplateBinding Content}"
                   Background="Aqua"
                   VerticalAlignment="Bottom" HorizontalAlignment="Left">
                <TextBlock.LayoutTransform>
                  <RotateTransform Angle="-30"/>
                </TextBlock.LayoutTransform>
                <TextBlock.RenderTransform>
                  <TranslateTransform  X="20"/>
                </TextBlock.RenderTransform>
            </TextBlock>

            <!--ContentPresenter Content="{TemplateBinding Content}" Width="200"
                          VerticalAlignment="Bottom" HorizontalAlignment="Left">
              <ContentPresenter.LayoutTransform>
                <RotateTransform Angle="-30"/>
              </ContentPresenter.LayoutTransform>
              <ContentPresenter.RenderTransform>
                <TranslateTransform  X="18"/>
              </ContentPresenter.RenderTransform>
            </ContentPresenter-->

          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

ContentPresenterTextBlock境界を見やすくするために色付きに変更されました。

私の問題：デフォルトでは、列の幅はヘッダーテキストの幅と同じであるため、セルの場所の使用は最適ではありません。列 ( HeaderGrid) の幅を (バインディング/コンバーターまたは手動で) 縮小すると、ヘッダー テキストの幅も縮小されます

画像を見る

ヘッダーのテキストをカットせずに列幅を減らす方法はありますか?

4

1 に答える 1

1

ずいぶん前のことですが、同じブログを使用して斜めのヘッダーを実装したことがあり、クロッピングに解決策を投稿すると思いました。その親によって制限されているのは ContentPresenter の物理的なレイアウト フレームであることがわかったので、右マージンに負の数を使用すると、コンテンツ プレゼンターのレイアウト フレームが拡張され、テキストがレンダリングされます。

(注: 私のソリューションでは、ContentPresenter ではなく TextBlock を使用しました)

Control の右マージンをそれ自体の逆 ActualWidth にバインドして、正しいマージンを確保します。

<TextBlock.Margin>
    <Binding ElementName="HeaderContent"
             Path="ActualWidth"
             Converter="{StaticResource MarginConverter}" />
</TextBlock.Margin>

コンバーター付き：

<TextBlock.Resources>
    <converters:AngledHeadersMarginConverter x:Key="MarginConverter" />
</TextBlock.Resources>

これを行う：

class AngledHeadersMarginConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new Thickness(0, 0, -(double)value, 0);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

これで問題は解決したようです。

于 2013-10-07T09:11:03.737 に答える