Side panel for open tabs for beginners

Mark Mather 156

How do I in UWP create a sidebar or side panel to view open web tabs? I've been watching tutorial videos and researching Microsoft Learn I already have a tab for it as a place holder labeled as a TabViewItem. I am a beginner for UWP, I know more about Visual Basic which is an easier code but it's limited.

 <Button Width="48"  
                Height="{StaticResource TabViewItemHeaderMinHeight}"  
                Margin="0,0,-1,0"  
                BorderThickness="1"  
                Background="Transparent"   
                Style="{StaticResource ButtonRevealStyle}"   
                Padding="2,2,0,0">  
                    <Viewbox MaxWidth="16" MaxHeight="16">  
                        <SymbolIcon Symbol="OpenPane"/>  
                    </Viewbox>  
                </Button>  
            </controls:TabView.TabStartHeader>

3 answers

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T03:27:36.677+00:00
Hello,

Welcome to Microsoft Q&A!

>>How do I in UWP create a sidebar or side panel to view open web tabs?

You could try to create a panel like Grid or StackPanel in Xaml. When user clicks the stick tab, bring the panel out.

I've made a simple test, you could refer to the following code:

<Page.Resources>  <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.TargetName="myTransform" Storyboard.TargetProperty="X" From="0" To="-500" Duration="0:0:1" /> </Storyboard>  <Storyboard x:Name="myStoryboard2"> <DoubleAnimation Storyboard.TargetName="myTransform" Storyboard.TargetProperty="X" From="-500" To="0" Duration="0:0:1" /> </Storyboard> </Page.Resources> <Grid> <muxc:TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > <muxc:TabView.TabStripHeader> <Grid x:Name="ShellTitlebarInset" Background="Red" > <Button Width="48" Height="25" Margin="0,0,-1,0" Click="Button_Click" BorderThickness="1" Background="Transparent" Padding="2,2,0,0"> <Viewbox MaxWidth="16" MaxHeight="16"> <SymbolIcon Symbol="OpenPane"/> </Viewbox> </Button> </Grid> </muxc:TabView.TabStripHeader> <muxc:TabView.TabItems> <muxc:TabViewItem Header="Home" IsClosable="False"> <muxc:TabViewItem.IconSource> <muxc:SymbolIconSource Symbol="Home" /> </muxc:TabViewItem.IconSource> </muxc:TabViewItem> </muxc:TabView.TabItems> <muxc:TabView.TabStripFooter> <Grid x:Name="CustomDragRegion" Background="Transparent" /> </muxc:TabView.TabStripFooter> </muxc:TabView>  <Grid x:Name="sidepanel" Width="500" Height="500" HorizontalAlignment="Left"> <Grid.RenderTransform> <TranslateTransform x:Name="myTransform" X="-500" Y="100" /> </Grid.RenderTransform> <TextBox Text="This is a side panel"/> </Grid> </Grid>

Thank you!
Please sign in to rate this answer.
Mark Mather 156 Reputation points

2020-05-04T03:38:58.3+00:00

Confused? Do I Create a new page of just add to the code I already have, or add to a click event?

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T04:20:22.91+00:00

The click event is used to show the side panel. If you have other ideas about how to trigger the side panel, then you don't need to add the click event and just do what you want.
You don't have to create a new page. Just a gird like what I did should be enough if only needs to shows some data without complicated logic.

Mark Mather 156 Reputation points

2020-05-04T04:24:30.15+00:00

should I add the show panel and hide button in the same click event

Mark Mather 156 Reputation points

2020-05-04T04:31:14.94+00:00

im getting this error

Severity Code Description Project File Line Suppression State
Error XLS0509 Property elements cannot be in the middle of an element's content. They must be before or after the content. Frost Browser2.xaml 26

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T04:31:39.047+00:00

Take Edge as an example, the stick button could show and hide the side panel. You could do it as well. Use a bool flag in your code-behind with a default value is false. Check the state of the flag every time when the button is click. When it is false, the side panel is hidden, then show the side panel and change the flag to true. When it is true, the side panel is shown, then hide the side panel and change the flag to false.

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T04:33:06.347+00:00

Where did you get this error?

Mark Mather 156 Reputation points

2020-05-04T04:38:35.477+00:00

When I inserted the code in the grid portion of the code

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T06:10:45.73+00:00

Please add a </Grid> below the text box control.

Mark Mather 156 Reputation points

2020-05-04T06:19:11.063+00:00

I'm getting the same message and 2 more

Severity Code Description Project File Line Suppression State

Error XDG0048 The specified value cannot be assigned to the collection. The following type was expected: "UIElement". Frost Browser2.xaml 15
Error XLS0509 Property elements cannot be in the middle of an element's content. They must be before or after the content. Frost Browser2.xaml 28
Error XLS0503 A value of type 'String' cannot be added to a collection or dictionary of type 'UIElementCollection'. Frost Browser2.xaml 19

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T06:23:19.433+00:00

Could you please try like this:

<Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>  <Grid x:Name="sidepanel" Width="500" Height="500" HorizontalAlignment="Left"> <Grid.RenderTransform> <TranslateTransform x:Name="myTransform" X="-500" Y="100" /> </Grid.RenderTransform> <TextBox Text="This is a side panel"/> </Grid> <muxc:TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

Mark Mather 156 Reputation points

2020-05-04T06:28:06.007+00:00

that fix that issue now im getting error

Severity Code Description Project File Line Suppression State

Error CS1061 'Browser2' does not contain a definition for 'TabViewItem_SelectionChanged' and no accessible extension method 'TabViewItem_SelectionChanged' accepting a first argument of type 'Browser2' could be found (are you missing a using directive or an assembly reference?) Frost C:\Users\markm\source\repos\Frost\Frost\obj\x64\Debug\Browser2.g.cs 35 Active

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T06:34:59.217+00:00

Please check your code-behind to see if you have defined the TabViewItem_SelectionChanged event. Generally, this issue happens when the event is not handled in the code-behind correctly.

Mark Mather 156 Reputation points

2020-05-04T06:47:57.403+00:00

cant find that error, but its still there and I tried to insert the code in the click even it wasn't working

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T06:53:34.497+00:00

What do you mean by it wasn't working?
You could refer to my code:

private void Button_Click(object sender, RoutedEventArgs e) { myStoryboard2.Begin(); } private void TabViewItem_SelectionChanged(object sender, SelectionChangedEventArgs e) { // this should be the missing method in your pervious reply. }

Mark Mather 156 Reputation points

2020-05-04T07:04:53.297+00:00

i made the corrections error went away i ran the program when i clicked the side bar button nothing happened

Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T07:10:49.8+00:00

Could you please share the Xaml code with me?

Mark Mather 156 Reputation points

2020-05-04T07:20:25.857+00:00

i had to post the whole code as new answers, the comment wont let me send
Sign in to comment

Mark Mather 156

Page
    x:Class="Frost.Browser2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Frost"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <!--animation to hide the panel-->
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
        Storyboard.TargetName="myTransform"
        Storyboard.TargetProperty="X"
        From="0" To="-500" Duration="0:0:1"  />
        </Storyboard>

        <!--animation to show the panel-->
        <Storyboard x:Name="myStoryboard2">
            <DoubleAnimation
        Storyboard.TargetName="myTransform"
        Storyboard.TargetProperty="X"
        From="-500" To="0" Duration="0:0:1"  />
        </Storyboard>
    </Page.Resources>

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid x:Name="sidepanel"  Width="500" Height="500" HorizontalAlignment="Left">
            <Grid.RenderTransform>
                <TranslateTransform x:Name="myTransform" X="-500" Y="100" />
            </Grid.RenderTransform>
            <TextBox Text="This is a side panel"/>

        </Grid>

        <controls:TabView x:Name="TabViewItem"

                      TabWidthBehavior="Equal"
                      CanCloseTabs="True"
                      IsCloseButtonOverlay="False"
                      CanDragItems="True"
                      CanReorderItems="False"
                      AllowDrop="False"
                      SelectedTabWidth="200" Margin="0,60,0,0" TabNavigation="Local" TabFocusNavigation="Local" SelectionChanged="TabViewItem_SelectionChanged">

            <controls:TabView.Resources>

                <x:Double x:Key="TabViewItemHeaderMinHeight">40</x:Double>
                <x:Double x:Key="TabViewItemHeaderMinWidth">55</x:Double>
                <x:Double x:Key="TabViewItemHeaderMaxWidth">200</x:Double>

            </controls:TabView.Resources>


            <controls:TabView.TabStartHeader>

                <Button 
                x:Name ="Open_Panel"
                Width="48"
                Height="{StaticResource TabViewItemHeaderMinHeight}"
                Margin="0,0,-1,0"
                BorderThickness="1"
                Background="Transparent" 
                Style="{StaticResource ButtonRevealStyle}" 
                Padding="2,2,0,0" Click="Open_Panel_Click">
                    <Viewbox MaxWidth="16" MaxHeight="16">
                        <SymbolIcon Symbol="OpenPane"/>
                    </Viewbox>

                </Button>
            </controls:TabView.TabStartHeader>

            <!-- Tabs -->
            <controls:TabViewItem 

                Header="Home" Icon="Home" ManipulationMode="ScaleInertia" CanDrag="True">
                <WebView x:Name="Neutron" ContentLoading="Neutron_ContentLoading" DOMContentLoaded="Neutron_DOMContentLoaded" NavigationCompleted="Neutron_NavigationCompleted" />

            </controls:TabViewItem>


            <controls:TabView.TabActionHeader>
                <Button x:Name="AddTabButtonUpper"
                Width="48"
                Height="{StaticResource TabViewItemHeaderMinHeight}"
                Margin="-1,0,0,0"
                BorderThickness="1"
                Background="Transparent"
                Style="{StaticResource ButtonRevealStyle}" Click="AddTabButtonUpper_Click">
                    <Viewbox MaxWidth="16"
                    MaxHeight="16">
                        <FontIcon FontFamily="Segoe MDL2 Assets"
                      Glyph="&#xE710;" />
                    </Viewbox>
                </Button>

            </controls:TabView.TabActionHeader>



            <controls:TabView.Footer>
                <TextBlock x:Name="StatusTextBox" Padding="12,8,12,8"
                   HorizontalAlignment="Left"
                   FontSize="12" FontWeight="Bold"
                   Text="Ready" />

            </controls:TabView.Footer>

        </controls:TabView>

        <Button Content="&#xE0A6;" FontFamily="Segoe MDL2 Assets" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.371,0.344" RequestedTheme="Default" Height="32" Width="42" Background="White"/>
        <Button Content="" FontFamily="Segoe MDL2 Assets" Margin="57,10,0,0" VerticalAlignment="Top" Height="32" Width="42" Background="#33E8E8E8"/>
        <Button Content="&#xE117;" FontFamily="Segoe MDL2 Assets" Margin="104,11,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.485,0.852" Height="31" Width="45" Background="#33FDFDFD"/>
        <TextBox HorizontalAlignment="Left" Margin="204,10,0,0" Text="" TextWrapping="Wrap" VerticalAlignment="Top" Width="1330" PlaceholderText="Enter Address" AllowDrop="True" BackgroundSizing="InnerBorderEdge" ElementSoundMode="Default" KeyDown="TextBox_KeyDown" Height="31"/>
        <Button Content="&#xE10F;" FontFamily="Segoe MDL2 Assets" Margin="154,11,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.485,0.852" Height="31" Width="45" Background="#33FFFFFF"/>
        <Button Content="&#xE712;" FontFamily="Segoe MDL2 Assets" Margin="0,11,10,0" VerticalAlignment="Top" RenderTransformOrigin="-0.485,0.852" Height="31" Width="45" HorizontalAlignment="Right" Background="#33EEEEEE">

        </Button>

    </Grid>
</Page>

Mark Mather 156

using Microsoft.Toolkit.Uwp.UI.Controls;
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238

namespace Frost
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class Browser2 : Page
    {
        public Browser2()
        {
            this.InitializeComponent();
            Uri w = new Uri("http://MSN.com");
            Neutron.Navigate(w);
        }


        private void TextBox_KeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
        {
            if (e.Key == Windows.System.VirtualKey.Enter)
                    {
                if (e.Key != Windows.System.VirtualKey.Enter) return;
                var textBox = (TextBox)sender;
                string text = textBox.Text;
                if (!text.StartsWith("http://")) text = $"http://{text}";
                if (!Uri.TryCreate(text, UriKind.Absolute, out Uri uri)) return;
                Neutron.Navigate(uri);
                e.Handled = true;

            }




        }

        private void Neutron_ContentLoading(WebView sender, WebViewContentLoadingEventArgs args)
        {
            // Show status.
            if (args.Uri != null)
            {
                StatusTextBox.Text = "Loading content for " + args.Uri.ToString();

            }
        }

        private void Neutron_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
        {
            // Show status.
            if (args.Uri != null)
            {
                StatusTextBox.Text = "Content for " + args.Uri.ToString() + " has finished loading";

            }
        }

        private void Neutron_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            if (args.IsSuccess == true)
            {
                TabView tabView = TabViewItem;
        var selectedTabViewItem = (TabViewItem) tabView.SelectedItem;
        if (selectedTabViewItem == null) return;
        selectedTabViewItem.Header = args.Uri.ToString();
        selectedTabViewItem.Icon = new SymbolIcon(Symbol.Globe);
                StatusTextBox.Text = " completed successfully.";

            }
            else
            {
                StatusTextBox.Text = "Navigation to: " + args.Uri.ToString() +
                                       " failed with error " + args.WebErrorStatus.ToString();

            }
        }

        private void AddTabButtonUpper_Click(object sender, RoutedEventArgs e)
        {

        }

        private void Open_Panel_Click(object sender, RoutedEventArgs e)
        {
            myStoryboard2.Begin();

       }

        private void TabViewItem_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {

        }
    }
    }

Roy Li - MSFT 32,231 Microsoft Vendor

Find the issue. Please add the side panel in the end.
Like this:

            <controls:TabView.Footer>
                    ......

           .......
        </Button>

        <Grid x:Name="sidepanel"  Width="500" Height="500" HorizontalAlignment="Left">
            <Grid.RenderTransform>
                <TranslateTransform x:Name="myTransform" X="-500" Y="100" />
            </Grid.RenderTransform>
            <TextBox Text="This is a side panel"/>

        </Grid>


    </Grid>

Mark Mather 156 Reputation points

2020-05-04T07:44:52.547+00:00

Did i do something wrong is this supposed to look like this
Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T07:49:24.13+00:00

No, this is the simple code that I made. Then you will need to add the controls and shows the data you need yourself.
Mark Mather 156 Reputation points

2020-05-04T07:54:08.917+00:00

I changed the w and h of the sidebar it looks good, but I can't close it or won't close
Roy Li - MSFT 32,231 Reputation points Microsoft Vendor

2020-05-04T07:59:18.633+00:00

As I mentioned in my previous comment, you could a bool flag in your code-behind with a default value is false. Check the state of the flag every time when the button is click. When it is false, the side panel is hidden, then show the side panel by calling myStoryboard2.Begin() and change the flag to true. When it is true, the side panel is shown, then hide the side panel by calling myStoryboard.Begin() and change the flag to false.
Mark Mather 156 Reputation points

2020-05-04T08:09:12.133+00:00

im new to this but what is a bool flag

Roy Li - MSFT 32,231 Microsoft Vendor

It's a bool variable. You could define in your code-behind.
Like this:

public bool IsOpen = false;

   private void Open_Panel_Click(object sender, RoutedEventArgs e)
            {

            if (!IsOpen)
            {
                myStoryboard2.Begin();
                IsOpen = !IsOpen;
            }
            else 
            {
                myStoryboard.Begin();
                IsOpen = !IsOpen;
            }


            }