WPF How to Override how ScrollViewer works in the code behind

Question

WPF How to Override how ScrollViewer works in the code behind

Brandon Boone 31

So I made a WPF custom controller, that displays the thumbnails of images. Anyhow, I read the images from a folder and I do not know how many images are in the folder. So I can't display them all at one time because they'll kill my runtime memory. So I only wanted to display 18 at a time but I still want the vertical stroll bar to appear and I want the button to adjust like it would for the actual size of the number of images in the file.

So basically I want my ScrollViewer to work how it would normally work but only display 10 thumbnails controllers at a times, without actually reading the other ones from the file in to runtime memory so my computer will not crash.

here is my Xaml code :

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/ThumbnailLib;component/ScrollViewerStyle.xaml"/>
            <ResourceDictionary Source="/ThumbnailLib;component/ScrollBarTestStyle.xaml"/>
            <ResourceDictionary Source="/ThumbnailLib;component/ScrollBarThumbVertical2Dictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="MainDisplayGrid" >
    <Rectangle Fill="AliceBlue">
        <Rectangle.Effect>
            <DropShadowEffect Opacity="0.25" BlurRadius="25" RenderingBias="Quality" ShadowDepth="3"   />
        </Rectangle.Effect>
    </Rectangle>
    <ScrollViewer   Name="ImageDisplayControlScroll" VerticalScrollBarVisibility="Visible"   Template="{DynamicResource ScrollViewerControlStyle}" >
        <ItemsControl  Name="ImageDisplayControl"    ScrollViewer.VerticalScrollBarVisibility="Visible"    Width="auto"  Height="auto">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="FrameworkElement.Margin" Value="10"/>
                </Style>
            </ItemsControl.ItemContainerStyle>

        </ItemsControl>
    </ScrollViewer>
</Grid>

Here is my code behind :

 private void UpdateThumbnailViewer(int numberOfThumbnailControls)
    {
        int maxVisibleThumbnails = 18;
        int thumbnailsPerRow = 3;
        double thumbnailControlHeight = 110;

        if (numberOfThumbnailControls > maxVisibleThumbnails)
        {
           

            double scrollViewerHeight = maxVisibleThumbnails / thumbnailsPerRow * thumbnailControlHeight;

            // Set the height of the ScrollViewer to show only the specified number of thumbnails
            ImageDisplayControlScroll.Height = scrollViewerHeight;

            // Show the vertical scrollbar
            ImageDisplayControlScroll.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;

            // Scroll to the top of the ScrollViewer
            ImageDisplayControlScroll.ScrollToTop();

            Debug.WriteLine("VerticalScrollBarVisibility set to Visible");
        }
        else
        {
            // Hide the vertical scrollbar
            ImageDisplayControlScroll.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;

        }
    }
I am settings thumbnailsPerRow to 3 because 18 thumbnailControl of Height 110 can fit in to 3 row just fine.

But the vertical scrollbar button is not displaying at all.

How do I fix this ?

Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-03-09T08:42:05.6566667+00:00

Hi,@Brandon Boone. I can't reproduce your problem. Could you show me the minimal sample code that can reproduce your problem for analysis?

Brandon Boone 31

@ Hui Liu-MSFT, I am not sure what you mean:

but here is the code behind for the ThumbnailViewer:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Runtime.CompilerServices;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;
using System.Windows.Controls.Primitives;

namespace ThumbnailLib
{
    /// <summary>
    /// Interaction logic for ThumbnailViewer.xaml
    /// </summary>
    public partial class ThumbnailViewer : UserControl, INotifyPropertyChanged
    {
        public ThumbnailViewer()
        {
            InitializeComponent();
       
        }

        private List<ThumbnailData> _thumbnailImages;
        private string _thumbnailActivated;
        private double _numberOfActivatedThumbnail;
        private long _numberOfImages;
        private  SynchronizationContext _synchronizationContextCurrent;



        public SynchronizationContext SynchronizationContextCurrent
        {
            get => _synchronizationContextCurrent;
            set 
            {
                if (_synchronizationContextCurrent == value) return;
                _synchronizationContextCurrent = value;
                OnPropertyChanged();
            }
        }

        public List<ThumbnailData> ThumbnailImages
        {
            get => (List<ThumbnailData>)GetValue(ThumbnailImagesProperty);

            set
            {
                if (_thumbnailImages == value) return;
                _thumbnailImages = value;
                SetValue(ThumbnailImagesProperty, value);
                OnPropertyChanged();
            }

        }



        public string ThumbnailActivated
        {
            get => (string)GetValue(ThumbnailActivatedProperty);
            set
            {
                if (_thumbnailActivated == value) return;
                _thumbnailActivated = value;
                SetValue(ThumbnailActivatedProperty, value);

            }
        }

        public double NumberOfActivatedThumbnail
        {
            get => (double)GetValue(NumberOfActivatedThumbnailProperty);
            set
            {
                if (_numberOfActivatedThumbnail == value) return;
                _numberOfActivatedThumbnail = value;
                SetValue(NumberOfActivatedThumbnailProperty, value);

            }
        }

        public long NumberOfImages
        {
            get => (long)GetValue(NumberOfImagesProperty);

            set
            {
                if (_numberOfImages == value) return;
                _numberOfImages = value;
                SetValue(NumberOfImagesProperty, value);
            }
        }


        public static readonly DependencyProperty NumberOfImagesProperty =
            DependencyProperty.Register("NumberOfImages",typeof(long), typeof(ThumbnailViewer), new FrameworkPropertyMetadata(0L, FrameworkPropertyMetadataOptions.AffectsRender, propertyChangedCallback: (o, e) => ((ThumbnailViewer)o).OnNumberOfImagesChanged()));
        public static readonly DependencyProperty ThumbnailImagesProperty =
           DependencyProperty.Register("ThumbnailImages", typeof(List<ThumbnailData>), typeof(ThumbnailViewer), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender, propertyChangedCallback: (o, e) =>((ThumbnailViewer)o).OnThumbnailImagesChanged()));

        public static readonly DependencyProperty ThumbnailActivatedProperty =
          DependencyProperty.Register("ThumbnailActivated", typeof(string), typeof(ThumbnailViewer), new PropertyMetadata(null, SwitchStateCallBack));

        public static readonly DependencyProperty NumberOfActivatedThumbnailProperty =
            DependencyProperty.Register("NumberOfActivatedThumbnail", typeof(double), typeof(ThumbnailViewer), new PropertyMetadata(0D, NumberOfActivatedThumbnailCallBack));

      
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged([CallerMemberName] string propName = "") =>
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));


        private static void SwitchStateCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var dep = d as ThumbnailViewer;
            if (dep == null) return;

          
                dep.ThumbnailActivated = (string)e.NewValue;
                dep.OnPropertyChanged(nameof(ThumbnailActivated));
            
           
        }


        private static void NumberOfActivatedThumbnailCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var dep = d as ThumbnailViewer;
            if (dep == null) return;


            dep.NumberOfActivatedThumbnail = (double)e.NewValue;
            dep.OnPropertyChanged(nameof(NumberOfActivatedThumbnail));

        }


        private void OnNumberOfImagesChanged()
        {
            UpdateThumbnailViewer((int)NumberOfImages);
        }

        private void OnThumbnailImagesChanged()
        {
           // if (SynchronizationContextCurrent == null) return;
            if (!IsEnabled) return;

           ProcessThumbnailImagesChanged();
        }

        //private void UpdateThumbnailViewer(int numberOfThumbnailControls)
        //{
        //    int maxVisibleThumbnails = 18;
        //    int thumbnailsPerRow = 3;
        //    double thumbnailControlHeight = 110;

        //    if (numberOfThumbnailControls > maxVisibleThumbnails)
        //    {


        //        double scrollViewerHeight = maxVisibleThumbnails / thumbnailsPerRow * thumbnailControlHeight;

        //        // Set the height of the ScrollViewer to show only the specified number of thumbnails
        //        ImageDisplayControlScroll.Height = scrollViewerHeight;

        //        // Show the vertical scrollbar
        //        ImageDisplayControlScroll.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;

        //        // Scroll to the top of the ScrollViewer
        //        ImageDisplayControlScroll.ScrollToTop();

        //        Debug.WriteLine("VerticalScrollBarVisibility set to Visible");
        //    }
        //    else
        //    {
        //        // Hide the vertical scrollbar
        //        ImageDisplayControlScroll.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;

        //    }
        //}

        private void UpdateThumbnailViewer(int numberOfThumbnailControls)
        {
            int maxVisibleThumbnails = 18;
            int thumbnailsPerRow = 3;
            double thumbnailControlHeight = 110;

            if (numberOfThumbnailControls > maxVisibleThumbnails)
            {
                double scrollViewerHeight = maxVisibleThumbnails / thumbnailsPerRow * thumbnailControlHeight;

                // Set the height of the ScrollViewer to show only the specified number of thumbnails
                ImageDisplayControlScroll.Height = scrollViewerHeight;

                // Set the viewport height of the ScrollViewer to the height of the visible area
                ImageDisplayControlScroll.ViewportHeight = maxVisibleThumbnails / thumbnailsPerRow * thumbnailControlHeight;

                // Show the vertical scrollbar
                ImageDisplayControlScroll.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;

                // Scroll to the top of the ScrollViewer
                ImageDisplayControlScroll.ScrollToTop();

                Debug.WriteLine("VerticalScrollBarVisibility set to Visible");
            }
            else
            {
                // Hide the vertical scrollbar
                ImageDisplayControlScroll.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
            }
        }


        void ProcessThumbnailImagesChanged()
        {
                if (ThumbnailImages == null)
                {
                    foreach (var item in ImageDisplayControl.Items)
                    {
                        ThumbnailControl thumbnailControl = item as ThumbnailControl;
                        if (thumbnailControl != null)
                        {
                            thumbnailControl.ThumbnailClickChanged -= ThumbnailControl_ThumbnailClickChanged;
                        }
                    }


                    ImageDisplayControl.Items.Clear();
                    return;
                }


                for (int i = 0; i < ThumbnailImages.Count; i++)
                {
                    ThumbnailControl thumbnailControl = new ThumbnailControl();
                    thumbnailControl.SynchronizationContext = _synchronizationContextCurrent;
                    thumbnailControl.ThumbnailImage = ThumbnailImages[i];
                    thumbnailControl.Foreground = Foreground;
                    thumbnailControl.ThumbnailClickChanged += ThumbnailControl_ThumbnailClickChanged;
                    ImageDisplayControl.Items.Add(thumbnailControl);

                }
           
        }


        void CrossThreadDelegateHandler(Action<bool> UpdateFunction, bool flag)
        {
            try
            {
                SynchronizationContextCurrent.Post(delegate
                {

                    Dispatcher.CurrentDispatcher.Invoke(() => UpdateFunction(flag));
                }, null);

            }
            catch
            {

            }

        }


        void ClearAll()
        {
            ImageDisplayControl.Items.Clear();
        }

        private void ThumbnailControl_ThumbnailClickChanged(string thumbnailName, double imageNumber)
        {
            ThumbnailActivated = thumbnailName;
            NumberOfActivatedThumbnail = imageNumber;
        }

        private void AddToMainDisplayGrid(ThumbnailControl thumbnail)
        {
            RowDefinition rowDefinition = new RowDefinition();
            MainDisplayGrid.RowDefinitions.Add(rowDefinition);
            ImageDisplayControl.Items.Add(thumbnail);
        }


    }
}

Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-03-10T06:51:10.24+00:00

Hi,@Brandon Boone. What is the complete code for your ThumbnailControl ThumbnailDataImage and DisplayControlScroll definition? Is it possible to show the code for ScrollBarThumbVertical2Dictionary.xaml ScrollBarTestStyle.xaml and ScrollViewerStyle.xaml?

Your answer

Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-03-09T08:42:05.6566667+00:00

Hi,@Brandon Boone. I can't reproduce your problem. Could you show me the minimal sample code that can reproduce your problem for analysis?
Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-03-10T06:51:10.24+00:00

Hi,@Brandon Boone. What is the complete code for your ThumbnailControl ThumbnailDataImage and DisplayControlScroll definition? Is it possible to show the code for ScrollBarThumbVertical2Dictionary.xaml ScrollBarTestStyle.xaml and ScrollViewerStyle.xaml?

Share via

WPF How to Override how ScrollViewer works in the code behind

Your answer