web-dev-qa-db-ja.com

新しい行の選択可能領域を小さくせずにWPF DataGridセルを右揃えにする方法は?

WPF4.0 DataGridを使用しています。新しい行のセルをダブルクリックすると、すべてが正常に動作しますただしその列にセルスタイルを追加しました。たとえば、xamlが次のようになるように、データを右揃えにする数値列があります

<DataGridTextColumn Binding="{Binding Path=ImpaId}"
                    CellStyle="{StaticResource CellRightAlign}">
     <DataGridTextColumn.Header>
          <TextBlock  Style="{StaticResource DataGridHeader}">Impa</TextBlock>
     </DataGridTextColumn.Header>
</DataGridTextColumn>

共有リソースのスタイルは次のとおりです。

<Style x:Key="CellRightAlign">
    <Setter Property="Control.HorizontalAlignment"
            Value="Right" />
</Style>

結果の新しい行の選択可能領域は、画像にその小さな青い領域として表示されます。これは、ユーザーがヒットする非常に小さなターゲットであり、これは新しい行で開始する可能性が最も高い列です。 。

DataGrid cell with tiny width

CellStyleを削除すると、領域は希望どおりに機能しますが、もちろん正しい配置が失われます。

DataGrid cell with proper width

誰もが両方を達成する方法を知っていますか?

試したもの

  1. バインディング上のTargetNullValueを幅のある形式に設定します。これは既存の行で機能しますが、新しい行には影響しません。
  2. 列にMinWidthを設定しても、これは新しい行選択可能領域の幅には影響しませんでした。

動作したもの:

@AngelWPFの回答の情報を使用して、CellStyleの使用からElementStyleの使用に次のように変更できました。

<DataGridTextColumn Binding="{Binding Path=ImpaId}"
                    CellStyle="{StaticResource CellRightAlign}">

なりました

<DataGridTextColumn Binding="{Binding Path=ImpaId}"
                    ElementStyle="{StaticResource CellRightAlign}">
57
Tod

ElementStyleをターゲットにしたDataGridTextColumnTextBlockを適用し、それを右揃えすれば、機能します。

      <DataGridTextColumn Binding="{Binding Path=ImpaId}">
          <DataGridTextColumn.Header>
               <TextBlock  Style="{StaticResource
                                  DataGridHeader}">
                    Impa
               </TextBlock>
          </DataGridTextColumn.Header>
          <DataGridTextColumn.ElementStyle>
              <Style TargetType="{x:Type TextBlock}">
                  <Setter Property="HorizontalAlignment" Value="Right" />
              </Style>
          </DataGridTextColumn.ElementStyle>
      </DataGridTextColumn> 
82
WPF-it

将来のコード検索のために、さらに例を追加したかっただけです。

これをxamlファイルの先頭に配置します。

<UserControl.Resources>
    <Style TargetType="{x:Type TextBlock}" x:Key="RightCell">
        <Setter Property="Background" Value="{Binding Included, Converter={StaticResource BoolToColorConverter}}"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="TextAlignment" Value="Right"/>
    </Style>
</UserControl.Resources>

そして、データグリッドで:

<DataGridTextColumn Header="Excluded" Binding="{Binding Excluded}" ElementStyle="{StaticResource RightCell}"/>

この右揃えでテキストが整列され、ソートが引き続き有効になります。テキストボックスがセルを塗りつぶします。この場合、boolコンバーターを使用して色が付けられます。

14
Rahbek

同様の問題が発生したばかりで、BlendのDataGridCellのスタイルを上書きすることで別の解決策を見つけました。

元のスタイルから変更されたアイテムは、スタイル自体のVerticalAlignmentおよびVerticalContentAlignmentのセッターであり、セル自体とVerticalAlignment="Center"およびHorizontalAlignment="Right"は、テンプレートプロパティでコンテンツを揃えます。これらの値を、セルのコンテンツを揃えるために必要なものに変更します。

スタイルの残りのcouldは、ベーススタイルの設定が使用されるように削除されます(StaticResourceを使用すると、スタイルはBasedOnです)。ただし、Blendが作成したとおりにスタイルを残しました。

この結果のXAMLコードは、コントロールリソースに含める必要があります。

<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource ResourceKey={x:Type DataGridCell}}">
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />

    <!-- Additional styles, can be removed to fall back to base styles -->
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ContentPresenter
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        ContentStringFormat="{TemplateBinding ContentStringFormat}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Right"
                        />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsKeyboardFocusWithin" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource {ComponentResourceKey ResourceId=FocusBorderBrushKey, TypeInTargetAssembly={x:Type DataGrid}}}"/>
        </Trigger>
    </Style.Triggers>
</Style>
5
mattanja

回避策を試すことができます:

           <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <TextBlock HorizontalAlignment="Right" Text="{Binding Path=ImpaId}"/>
                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
5
MichaelS