Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set margin for scrollbar in scrollviewer using xaml only

I need set the scrollbar's margin in a scrollviewer. I try to rewrite scrollbar margin in default scrollviewer style. just modify the margin in the style, and the scrollbar magin set the right value. But the content in scrollviewer just stay static when the scrollbar move. How can I fixed it or is there another way to set the margin for scrollbar in scrollviewer easier?

<Style TargetType="ScrollViewer">
  <Setter Property="HorizontalContentAlignment" Value="Left" />
  <Setter Property="VerticalContentAlignment" Value="Top" />
  <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
  <Setter Property="Padding" Value="4"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="BorderBrush">
      <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="#FFA3AEB9" Offset="0"/>
              <GradientStop Color="#FF8399A9" Offset="0.375"/>
              <GradientStop Color="#FF718597" Offset="0.375"/>
              <GradientStop Color="#FF617584" Offset="1"/>
          </LinearGradientBrush>
      </Setter.Value>
  </Setter>
  <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="ScrollViewer">
              <Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                  <Grid Background="{TemplateBinding Background}">
                      <Grid.RowDefinitions>
                          <RowDefinition Height="*"/>
                          <RowDefinition Height="Auto"/>
                      </Grid.RowDefinitions>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="*"/>
                          <ColumnDefinition Width="Auto"/>
                      </Grid.ColumnDefinitions>

                      <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                              Cursor="{TemplateBinding Cursor}"
                                              Margin="{TemplateBinding Padding}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"/>

                      <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9EEF4"/>

                      <ScrollBar x:Name="VerticalScrollBar" Width="18"
                                 IsTabStop="False"
                                 Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                 Grid.Column="1" Grid.Row="0" Orientation="Vertical"
                                 ViewportSize="{TemplateBinding ViewportHeight}"
                        `enter code here`         Maximum="{TemplateBinding ScrollableHeight}"
                                 Minimum="0"
                                 Value="{TemplateBinding VerticalOffset}"
                                 Margin="0,20,0,0"/>

                      <ScrollBar x:Name="HorizontalScrollBar" Height="18"
                                 IsTabStop="False"
                                 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                 Grid.Column="0" Grid.Row="1" Orientation="Horizontal"
                                 ViewportSize="{TemplateBinding ViewportWidth}"
                                 Maximum="{TemplateBinding ScrollableWidth}"
                                 Minimum="0"
                                 Value="{TemplateBinding HorizontalOffset}"
                                 Margin="-1,0,-1,-1"/>

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

like image 428
Dragon Avatar asked Sep 10 '15 03:09

Dragon


People also ask

How do I add a ScrollBar to my grid?

In the presentation tab of table layout properties, Choose width of content as Pixels(Fit Content) to see a horizontal scroll bar only for the grid with more columns.

How do I add a vertical ScrollBar in WPF?

How to enable scrollbar in a WPF TextBox. The simplest way to add scrolling functionality to a TextBox control is by enabling its horizontal and vertical scrolling. The HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties are used to set horizontal and vertical scroll bars of a TextBox.

What is ScrollViewer in WPF?

There are two predefined elements that enable scrolling in WPF applications: ScrollBar and ScrollViewer. The ScrollViewer control encapsulates horizontal and vertical ScrollBar elements and a content container (such as a Panel element) in order to display other visible elements in a scrollable area.


1 Answers

I made Margin="10,20,10,20" for the vertical ScrollBar and it worked just fine. The ScrollViewer contains a DataGrid for testing purposes.

XAML:

        <ScrollViewer HorizontalAlignment="Left" Height="152" Margin="25,42,0,0" VerticalAlignment="Top" Width="449">
        <ScrollViewer.Template>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                    <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Margin="10,20,10,20"/>
                    <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                </Grid>
            </ControlTemplate>
        </ScrollViewer.Template>
        <DataGrid x:Name="dataGrid" ItemsSource="{Binding Mode=OneWay}">
            <DataGrid.DataContext>
                <local:MyDataCollection/>
            </DataGrid.DataContext>
        </DataGrid>
    </ScrollViewer>

enter image description here

like image 96
jsanalytics Avatar answered Sep 26 '22 17:09

jsanalytics