There are many tabs in a TabView Control in WinUI3 App. I made a function: pin a selected tab to top. After set it to the top (meaning the first tab ), I make it be selected. Everything is ok, but the first selected tab may be hidden if I had previously chosen to set the tabs at the end to the top. So how to scroll the tab area in code?

Using FindChildren , it works for me. var list = new List<ScrollViewer>(); FindChildren(list, sender); list[0].ChangeView(0,null,null);

How to scroll in the tabs area in TabView in WinUI3 by using code

C CB 150

OK, thanks! It works now with ScrollViewer.ChangeView method. But there is still a little bug showing below:

User's image

0ab24e9beb5345f1a1e5822cde4e70e

Xiaopo Yang - MSFT 12,236 Microsoft Vendor

@C CB, could you please show a minimal, reproducible sample without private information?

C CB 150

OK. I paste a complete xaml & cs sample WinUI3 program showing below.

using Microsoft.UI;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace WInUI3B_Packaged
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class TestWindowForTabView : Window
    {
        private int ITEM_COUNT = 10;
        public TestWindowForTabView()
        {
            this.InitializeComponent();

            this.AppWindow.Resize(new Windows.Graphics.SizeInt32(830, 600));
        }

        private void tabviewTest_Loaded(object sender, RoutedEventArgs e)
        {
            int intStart = (int)'A';
            for (int i = 0; i < ITEM_COUNT; i++)
            {
                TabViewItem item = new TabViewItem();

                char headerChar = (char)(intStart + i);
                string headerText = headerChar.ToString().PadRight(3, headerChar);
                item.Header = headerText;

                item.MaxWidth = 100;
                item.MinWidth = 100;
                item.IsClosable = false;
                item.Background = new SolidColorBrush(Colors.LightBlue);
                tabviewTest.TabItems.Add(item);
            }
        }

        private void btnTest_Click(object sender, RoutedEventArgs e)
        {
            int childCount = tabviewTest.TabItems.Count;
            if (childCount < ITEM_COUNT) { return; }

            txtResult.Text = "";
            int targetIndex = 4;// Maybe you need to change the value for your Screen resolution
            if (tabviewTest.SelectedIndex != targetIndex)
            {
                txtResult.Text = "Please select tab 'EEE' first.";
                return;
            }

            TabViewItem targetItem = (TabViewItem)tabviewTest.TabItems[targetIndex];

            tabviewTest.TabItems.RemoveAt(targetIndex);
            tabviewTest.TabItems.Insert(0, targetItem);
            tabviewTest.SelectedIndex = 0;

            var list = FindChildren<ScrollViewer>(tabviewTest);
            if (list != null && list.Count > 0)
            {
                list[0].ChangeView(0, null, null);
            }
        }

        public static List<T> FindChildren<T>(DependencyObject parent) where T : DependencyObject
        {
            if (parent == null) return null;
            List<T> retList = new List<T>();

            int childrenCount = VisualTreeHelper.GetChildrenCount(parent);
            for (int i = 0; i < childrenCount; i++)
            {
                DependencyObject child = VisualTreeHelper.GetChild(parent, i);
                if (child is T)
                {
                    retList.Add((T)child);
                }
                else
                {
                    retList.AddRange(FindChildren<T>(child));
                }
            }
            return retList;
        }

    }
}

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WInUI3B_Packaged.TestWindowForTabView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WInUI3B_Packaged"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


    <Grid>
        <StackPanel Orientation="Vertical">
            <TabView x:Name="tabviewTest" Loaded="tabviewTest_Loaded" /> 

            <Border Height="60" />

            <StackPanel HorizontalAlignment="Center" Orientation="Vertical">
                <TextBlock Text="1. Clike tab 'EEE' to select it." ></TextBlock>
                <TextBlock Text="2. Clike the button 'Pin to top', you will see the bug UI." ></TextBlock>
                <Button x:Name="btnTest" Click="btnTest_Click" Width="220" Background="LightGray">Pin to top</Button>
                <TextBlock x:Name="txtResult" Text="" Foreground="Red" ></TextBlock>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

C CB 150

OK, the following is a complete WinUI3 window program code.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WInUI3B_Packaged.TestWindowForTabView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WInUI3B_Packaged"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


    <Grid>
        <StackPanel Orientation="Vertical">
            <TabView x:Name="tabviewTest" Loaded="tabviewTest_Loaded" /> 

            <Border Height="60" />

            <StackPanel HorizontalAlignment="Center" Orientation="Vertical">
                <TextBlock Text="1. Clike tab 'EEE' to select it." ></TextBlock>
                <TextBlock Text="2. Clike the button 'Pin to top', you will see the bug UI." ></TextBlock>
                <Button x:Name="btnTest" Click="btnTest_Click" Width="220" Background="LightGray">Pin to top</Button>
                <TextBlock x:Name="txtResult" Text="" Foreground="Red" ></TextBlock>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

using Microsoft.UI;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace WInUI3B_Packaged
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class TestWindowForTabView : Window
    {
        private int ITEM_COUNT = 10;
        public TestWindowForTabView()
        {
            this.InitializeComponent();

            this.AppWindow.Resize(new Windows.Graphics.SizeInt32(830, 600));
        }

        private void tabviewTest_Loaded(object sender, RoutedEventArgs e)
        {
            int intStart = (int)'A';
            for (int i = 0; i < ITEM_COUNT; i++)
            {
                TabViewItem item = new TabViewItem();

                char headerChar = (char)(intStart + i);
                string headerText = headerChar.ToString().PadRight(3, headerChar);
                item.Header = headerText;

                item.MaxWidth = 100;
                item.MinWidth = 100;
                item.IsClosable = false;
                item.Background = new SolidColorBrush(Colors.LightBlue);
                tabviewTest.TabItems.Add(item);
            }
        }

        private void btnTest_Click(object sender, RoutedEventArgs e)
        {
            int childCount = tabviewTest.TabItems.Count;
            if (childCount < ITEM_COUNT) { return; }

            txtResult.Text = "";
            int targetIndex = 4;// Maybe you need to change the value for your Screen resolution
            if (tabviewTest.SelectedIndex != targetIndex)
            {
                txtResult.Text = "Please select tab 'EEE' first.";
                return;
            }

            TabViewItem targetItem = (TabViewItem)tabviewTest.TabItems[targetIndex];

            tabviewTest.TabItems.RemoveAt(targetIndex);
            tabviewTest.TabItems.Insert(0, targetItem);
            tabviewTest.SelectedIndex = 0;

            var list = FindChildren<ScrollViewer>(tabviewTest);
            if (list != null && list.Count > 0)
            {
                list[0].ChangeView(0, null, null);
            }
        }

        public static List<T> FindChildren<T>(DependencyObject parent) where T : DependencyObject
        {
            if (parent == null) return null;
            List<T> retList = new List<T>();

            int childrenCount = VisualTreeHelper.GetChildrenCount(parent);
            for (int i = 0; i < childrenCount; i++)
            {
                DependencyObject child = VisualTreeHelper.GetChild(parent, i);
                if (child is T)
                {
                    retList.Add((T)child);
                }
                else
                {
                    retList.AddRange(FindChildren<T>(child));
                }
            }
            return retList;
        }

    }
}

Xiaopo Yang - MSFT 12,236 Microsoft Vendor

@C CB, it works for me.

GIF 7-8-2024 11-09-31 PM

C CB 150

Hi, Maybe you didn't follow my steps to operate.

After the app starts, do nothing, just click tab 'EEE'. Please note that, if tab 'EEE' is not the last fully visible tab. maybe you need to change some code and chose another tab to click.
Click the button 'Pin to top'

Xiaopo Yang - MSFT 12,236 Microsoft Vendor

GIF 7-9-2024 1-08-54 AM

@C CB, do you mean this? Both LLL and MMM are tested.

C CB 150

OK. I change another description to show the bug, please check the below screenshots:

94115c1508ad4c8833c03a76093bfcb

d5c697222f0d6ad0eb23b13245e96e8

e2f6b6302980bbf739f89cd49e5d1ae

C CB 150

Maybe the website has a bug too, has my comment been submitted yet?

Xiaopo Yang - MSFT 12,236 Microsoft Vendor

@C CB, it's due to your resizing. Add tabviewTest.UpdateLayout();

var list = FindChildren<ScrollViewer>(tabviewTest);
if (list != null && list.Count > 0)
{
    list[0].ChangeView(0, null, null);
}
tabviewTest.UpdateLayout();

C CB 150

The bug still exists.

bf760839-8c76-44c3-aa72-6726c8294b51

Xiaopo Yang - MSFT 12,236 Microsoft Vendor

OK. You can report it at https://github.com/microsoft/microsoft-ui-xaml/issues.

Share via

How to scroll in the tabs area in TabView in WinUI3 by using code

0 additional answers