Scrorller view change the width of scroller view.

Question

Hi,

It possible to change the width of scroller view ?

It very small.

And can you please tell me how to do (wider) also when hover or drag ?

The outer is border and the inner is scroller

Here is the image:

Here my code:

<maui:MauiWinUIApplication

x:Class="GssdDesktopClient.Maui.WinUI.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:maui="using:Microsoft.Maui"

xmlns:local="using:GssdDesktopClient.Maui.WinUI">

<maui:MauiWinUIApplication.Resources>

    <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>


    

    <SolidColorBrush x:Key="MenuFlyoutItemBackground">#81a1b4</SolidColorBrush>

    <SolidColorBrush x:Key="MenuFlyoutItemselectedColor" Color="White" />

    <StaticResource x:Key="MenuFlyoutItemBackgroundPointerOver" ResourceKey="MenuFlyoutItemselectedColor" />

    <StaticResource x:Key="MenuFlyoutItemBackgroundPressed" ResourceKey="MenuFlyoutItemselectedColor" />

   <x:Double x:Key="ScrollBarSize">60</x:Double>

    <x:Double x:Key="ScrollBarVerticalThumbMinWidth">40</x:Double>



    <VisualState x:Name="TouchIndicator" >

        <VisualState.Setters>

            <Setter Target="HorizontalRoot.Visibility" Value="Collapsed" />

            <Setter Target="VerticalRoot.Visibility" Value="Collapsed" />

            <Setter Target="HorizontalPanningRoot.Opacity" Value="1" />

            <Setter Target="VerticalPanningRoot.Opacity" Value="1" />

            <!--add this line to close the animation when you click the scollbar-->

            <Setter Target="VerticalRoot.IsHitTestVisible" Value="True" />



        </VisualState.Setters>

    </VisualState>

</maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

Thanks,

Answer 1

Hello,

======================Update==============================

Can you please tell me how to do (wider) also when hover or drag?

If you want to scrollbar to wider when hover and drag, please increase the value of <x:Double x:Key="ScrollBarSize">60</x:Double>.

Yes i want to width of the scrollbar in the ScrollView.

You can change the width of the scrollbar by MauiWinUIApplication.Resources

Please open App.xaml file in the Windows folder. Add ScrollBarSize and ScrollBarVerticalThumbMinWidth, you can change these values to change the width of the scrollbar

<maui:MauiWinUIApplication
    x:Class="MauiApp1.WinUI.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    xmlns:local="using:MauiApp1.WinUI">
 
    <maui:MauiWinUIApplication.Resources>
         <ResourceDictionary>
             <x:Double x:Key="ScrollBarSize">40</x:Double>
             <x:Double x:Key="ScrollBarVerticalThumbMinWidth">40</x:Double>

Copy lines from L7472 to L8022 Here

         </ResourceDictionary>
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

They Copy lines from L7472to L8022 in the above <ResourceDictionary> tag, then find the <VisualState> called TouchIndicator, add this line to disable the animation when you click the scrollbar

<VisualState x:Name="TouchIndicator">
<VisualState.Setters>

     <Setter Target="HorizontalRoot.Visibility" Value="Collapsed" />
     <Setter Target="VerticalRoot.Visibility" Value="Collapsed" />
     <Setter Target="HorizontalPanningRoot.Opacity" Value="1" />
     <Setter Target="VerticalPanningRoot.Opacity" Value="1" />
 <!--add this line to close the animation when you click the scollbar-->
  <Setter Target="VerticalRoot.IsHitTestVisible" Value="True" />
 
     </VisualState.Setters>
</VisualState>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.