10

私が達成しようとしているのはDataGrid、各行の角が丸くなり、グリッド線がないようにコントロールをカスタマイズすることです（作業しているデザインのみ）。

私がやろうとしているのは、期待どおりの外観になるようにコントロールControlTemplateを変更するを作成することです。DataGridRowこれまでのところ、これは私が取り組んでいるものです：

    <DataGrid Grid.Row="0" Grid.Column="0" Margin="5,5,5,5" AutoGenerateColumns="False" ItemsSource="{Binding Path=MyData}">
        <DataGrid.Resources>
            <Style x:Key="rowStyle" TargetType="{x:Type DataGridRow}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type DataGridRow}">
                            <Border CornerRadius="8,8,8,8" BorderBrush="Red" BorderThickness="2">
                                <ContentPresenter />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DataGrid.Resources>
        <DataGrid.Columns>
            <DataGridTextColumn Header="Foo"  />
            <DataGridTextColumn Header="Baz" />
            <DataGridTextColumn Header="Bar" />
        </DataGrid.Columns>
   </DataGrid>

このバージョンは明らかに初歩的なものですが（単にストックテンプレートの周囲の境界線）、アプリケーションを実行しても違いはわかりません。

では、問題は、DataGridRowのコントロールテンプレートをどのようにカスタマイズするかということです。または、これが実行できない場合、私の目的を達成するためのより良い方法はありますか？

4

2 に答える 2

13

行の実際のテンプレートは、これよりも少し複雑です。以下のスタイルを参照してください。これはほとんど基本的なスタイルですが、デザインの一部を追加し、andのトリガーを残しましたIsMouseOver（IsSelected自由に削除してください）。

<Style TargetType="{x:Type DataGridRow}">
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="BorderBrush" 
            Value="Red" />
    <Setter Property="BorderThickness" 
            Value="2" />
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="Validation.ErrorTemplate"
            Value="{x:Null}" />
    <Setter Property="ValidationErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <TextBlock Foreground="Red"
                           Margin="2,0,0,0"
                           Text="!"
                           VerticalAlignment="Center" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRow}">
                <Border x:Name="DGR_Border"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        SnapsToDevicePixels="True"
                        CornerRadius="8,8,8,8">
                    <SelectiveScrollingGrid>
                        <SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </SelectiveScrollingGrid.ColumnDefinitions>
                        <SelectiveScrollingGrid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </SelectiveScrollingGrid.RowDefinitions>
                        <DataGridCellsPresenter Grid.Column="1"
                                                ItemsPanel="{TemplateBinding ItemsPanel}"
                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        <DataGridDetailsPresenter Grid.Column="1"
                                                  Grid.Row="1"
                                                  SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                                                  Visibility="{TemplateBinding DetailsVisibility}" />
                        <DataGridRowHeader Grid.RowSpan="2"
                                           SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                                           Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                    </SelectiveScrollingGrid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="DGR_Border"
                                Property="Background"
                                Value="LightGray" />
                    </Trigger>
                    <Trigger Property="IsSelected"
                             Value="True">
                        <Setter TargetName="DGR_Border"
                                Property="Background"
                                Value="Gray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ああ、ところで、あなたはスタイルのキーを持っていますが、どの時点でもそれを参照していません-したがって、行はそのデフォルトのスタイルを使用します。自分のスタイルまたは上記のスタイルを使用するには、リソースにキーを与えないでください。

于 2013-01-10T20:04:38.460 に答える
1 
<Style TargetType="{x:Type DataGridColumnHeader}" x:Key="DatagridColumnHeaderStyle">
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Height" Value="35" />
        <Setter Property="SeparatorBrush" Value="DarkRed" />
        <Setter Property="FontWeight" Value="Black" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid>
                        <Border x:Name="columnHeaderBorder"
                                BorderThickness="1"
                                Padding="3,0,3,0">

                            <ContentPresenter HorizontalAlignment="TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </Grid>
                </ControlTemplate>    
            </Setter.Value>
        </Setter>
    </Style>

そしてxamlであなたは以下のコードを置くことができます

 <DataGrid x:Name="myGridView" 
           Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
           Height="200" Margin="5,15,5,0"  
           AutoGenerateColumns="False" 
           ItemsSource="{Binding Person}" 
           SelectedItem="{Binding Path=PersonDetails, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >

    <DataGrid.Columns>

        <DataGridTextColumn HeaderStyle="{StaticResource DatagridColumnHeaderStyle}"  Width="200" Header="Customer Name" Binding="{Binding Path=Name}"/>
        <DataGridTextColumn HeaderStyle="{StaticResource DatagridColumnHeaderStyle}" Width="250" Header="Customer Address" Binding="{Binding Path=Address}"/>
        <DataGridTextColumn HeaderStyle="{StaticResource DatagridColumnHeaderStyle}" Width="100" Header="Order Id" Binding="{Binding Path=OrderId}"/>

    </DataGrid.Columns>
于 2014-05-20T09:27:01.723 に答える