Change padding of usercontrol based on ComputedVerticalScrollBarVisibility

Question

I have a usercontrol that hosts some content inside a scrollviewer, when the window is resized the vertical scroll is set up to show automatically, this all works fine.

I want a trigger on the ComputedVerticalScrollBarVisibility property, that changes the Padding of the actual usercontrol. This is my code right now, why is it not working?

<UserControl x:Class="Something.CustomizableView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:view="clr-namespace:Something"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Style>
        <Style TargetType="{x:Type Control}">
            <Setter Property="Padding" Value="20" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=TheScroll,Path=ComputedVerticalScrollBarVisibility}" Value="Visible">
                    <Setter Property="Padding" Value="0"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>

Here is my ScrollViewer + ItemsControl

<ScrollViewer x:Name="TheScroll" VerticalScrollBarVisibility="Auto" Grid.Row="1">
            <ItemsControl
                ItemsSource="{Binding ContentModules}"
                ItemTemplateSelector="{StaticResource ContentTemplateSelector}"
                Background="White">
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="FrameworkElement.Margin" Value="0 0 0 50" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </ScrollViewer>

Answer 1

Use this style for the scroll viewer, and remove the style from the user control:

<Thickness x:Key="NoScrollPaddingThickness"
            Left="20"
            Top="20"
            Bottom="20"
            Right="{StaticResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
</Thickness>
<Thickness x:Key="WithScrollPaddingThickness"
            Left="20"
            Top="20"
            Bottom="20"
            Right="0">
</Thickness>
<Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Padding"
            Value="{StaticResource NoScrollPaddingThickness}" />
    <Setter Property="Template">
        <Setter.Value>
            <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.ScrollBarBrushKey}}"
                                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}" />
                    <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.Triggers>
                    <Trigger Property="ComputedVerticalScrollBarVisibility"
                                Value="Visible">
                        <Setter Property="Padding"
                                Value="{StaticResource WithScrollPaddingThickness}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsEnabled"
                    Value="false">
            <Setter Property="Foreground"
                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
        </Trigger>
    </Style.Triggers>
</Style>

EDIT

To make it more compact, we can use the style only - we don't really need a template here:

<Thickness x:Key="NoScrollPaddingThickness"
            Left="20"
            Top="20"
            Bottom="20"
            Right="{StaticResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
</Thickness>
<Thickness x:Key="WithScrollPaddingThickness"
            Left="20"
            Top="20"
            Bottom="20"
            Right="0">
</Thickness>
<Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Padding"
            Value="{StaticResource NoScrollPaddingThickness}" />
    <Style.Triggers>
        <Trigger Property="IsEnabled"
                    Value="false">
            <Setter Property="Foreground"
                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
        </Trigger>
        <Trigger Property="ComputedVerticalScrollBarVisibility"
                 Value="Visible">
            <Setter Property="Padding"
                    Value="{StaticResource WithScrollPaddingThickness}" />
        </Trigger>
    </Style.Triggers>
</Style>