Стилизация GridSplitter wpf C#

я хочу стилизовать свой GridSplitter, добавив на него точки (как можно найти на http://msdn.microsoft.com/en-us/library/aa970265.aspx).

Я также хочу изменить цвет gridsplitter при наведении курсора мыши или применить тему 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>

styling wpf templating wpf-controls gridsplitter
person AZ_    schedule 03.11.2009    source источник
comment
Предоставляю вам пример кода... не публикую весь код, потому что он слишком большой   -  person AZ_    schedule 03.11.2009
comment
Я действительно не думаю, что проголосовавшие против должны что-то знать об этом. Они просто не понимают из-за отсутствия знаний :p   -  person AZ_    schedule 15.07.2011

Ответы (5)


arrow_upward
40
arrow_downward

В основном для моего собственного справки в будущем, вот вертикальный разделитель сетки, который имеет закругленную форму кнопки (но не реагирует должным образом на наведение мыши):

<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>

Горизонтальный разделитель может просто использовать «····» в качестве содержимого кнопки.

person Burton Radons    schedule 04.07.2011
comment
Это выглядит легко и очень чисто! - person Enrico; 24.04.2013
comment
Спасибо за это. В итоге я использовал ▌▌▌▌▌▌ в качестве содержимого для горизонтального разделителя, который, ИМХО, выглядит немного лучше, чем ····. - person dodgy_coder; 14.11.2014

arrow_upward
18
arrow_downward 

<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, чтобы получить тот же эффект, Подробнее

person AZ_    schedule 10.11.2009
comment
Не уверен, что это за изображение должно быть ... неработающая ссылка на изображение указывает на реальную страницу MSDN. Я знаю, что это старый ответ, но в любом случае не стесняйтесь исправить ссылку (с загрузчиком stack.imgur?). - person Mathieu Guindon; 05.11.2016

arrow_upward
4
arrow_downward

Другой способ добавить кнопку/графику «захвата» в 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 находятся в одном столбце, а в Label установлено значение IsHitTestVisible=False.

person James    schedule 17.03.2016

arrow_upward
1
arrow_downward

Для другого типа стиля вы можете сделать следующее.

Создает красивый перекрывающийся стиль. Gridsplitter перекрывает как левый, так и правый контент.

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

     <Border Grid.Column="0" Background="#777"/>

     <GridSplitter
         Grid.Column="1"
         HorizontalAlignment="Stretch" 
         ResizeDirection="Columns"
         ResizeBehavior="PreviousAndNext"
         Panel.ZIndex="2">
           <GridSplitter.Template>

               <ControlTemplate TargetType="{x:Type GridSplitter}">

                   <Grid>
                        <Rectangle IsHitTestVisible="False" Fill="Black"/>
                        <Border
                           Background="White"
                           Width="25" Height="25" c 
                           CornerRadius="25" Margin="-13 0">
                           <Path Stroke="Black" StrokeThickness="0.5" Width="17" Height="7" Data="m 4.4549201,1048.4664 -4.33056515,1.9095 4.33056515,1.9094 0,-3.8189 z m 3.0901599,0 0,3.8189 4.330565,-1.9094 -4.330565,-1.9095 z m -3.2239449,0.2053 0,3.4083 -3.86518514,-1.7041 3.86518514,-1.7042 z m 3.3577349,0 3.865185,1.7042 -3.865185,1.7041 0,-3.4083 z" Stretch="Fill"/>
                        </Border>
                   </Grid>

                </ControlTemplate>

                </GridSplitter.Template>

     </GridSplitter>

     <Border Grid.Column="2" Background="#777"/>

</Grid>

Пример вывода

person Shaun Nicholson    schedule 06.11.2020

arrow_upward
0
arrow_downward

В ответ на ответ Бертона Радона я лично предпочитаю стиль:

<GridSplitter
  Width="8"
  HorizontalAlignment="Stretch"
  VerticalAlignment="Stretch">

  <GridSplitter.Template>
    <ControlTemplate TargetType="{x:Type GridSplitter}">
      <Grid>
        <TextBlock
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Text="⁞" />
        <Rectangle Fill="#00FFFFFF" />
      </Grid>
    </ControlTemplate>
  </GridSplitter.Template>
</GridSplitter>

Эта реализация производит тот же эстетический эффект, сохраняя при этом функциональность.

person TimeTravelPenguin    schedule 12.09.2020