web-dev-qa-db-ja.com

GridSplitter wpf C＃のスタイリング

gridSplitterにドットを追加するようにスタイルを設定したい（ http://msdn.Microsoft.com/en-us/library/aa970265.aspx にあります）。

また、mouseOverでグリッドスプリッターの色を変更するか、Aeroテーマを適用したいと思います。

<Style x:Key="GridSplitterStyle1" TargetType="{x:Type GridSplitter}">
  <Setter Property="Background"
          Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
  <Setter Property="PreviewStyle">
    <Setter.Value>
      <Style>
        <Setter Property="Control.Template">
          <Setter.Value>
            <ControlTemplate>
              <Rectangle Fill="#80000000"/>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type GridSplitter}">
        <Border Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!--Theme-->
<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary 
   Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml" />
</ResourceDictionary.MergedDictionaries>

<GridSplitter x:Name="gridSplitterTreeNodes" Width="10"
              BorderThickness="1,0" Cursor="SizeWE"
              RenderTransformOrigin="-1.2,0.507" ShowsPreview="True" 
              Style="{DynamicResource GridSplitterStyle1}">
  <GridSplitter.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FFE3EFFF" Offset="0"/>
      <GradientStop Color="#FFAFD2FF" Offset=".45"/>
    </LinearGradientBrush>
  </GridSplitter.Background>
</GridSplitter>
wpfwpf-controlsstylingtemplatinggridsplitter
23
AZ_
<GridSplitter x:Name="gridSplitterTreeNodes" Width="5" BorderThickness="1,0" 
     Cursor="SizeWE" RenderTransformOrigin="-1.2,0.507" ShowsPreview="True"
     Style="{DynamicResource GridSplitterStyle1}">
  <GridSplitter.Background>
    <ImageBrush ImageSource="Images\gripDots.png" TileMode="FlipXY" 
                Stretch="UniformToFill"/>
  </GridSplitter.Background>
</GridSplitter>

Msnd Microsoftから画像を保存して、同じ効果を得ることができます 詳細情報

17
AZ_

主に私自身の将来の参考のために、これはボタンの丸い形をした垂直グリッドスプリッターです（ただし、マウスオーバーに適切に反応しません）：

<GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="8">
    <GridSplitter.Template>
        <ControlTemplate TargetType="{x:Type GridSplitter}">
            <Grid>
                <Button Content="⁞" />
                <Rectangle Fill="#00FFFFFF" />
            </Grid>
        </ControlTemplate>
    </GridSplitter.Template>
</GridSplitter>

水平スプリッターは、ボタンのコンテンツとして「····」を使用できます。

35
Burton Radons

マウスイベントを失うことなく、GridSplitterに「グリッパー」ボタン/グラフィックを追加する別の方法は、スプリッターの上に単純なラベルを使用することです。

    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" Background="Gray"/>

    <Label Grid.Column="1" Content="⁞" Foreground="White" VerticalAlignment="Center" FontSize="26" FontWeight="Bold" IsHitTestVisible="False"/>

GridSplitterとLabelが同じ列にあり、IsHitTestVisible = FalseがLabelに設定されていることを確認します。

4
James