question

MarkMather-7608 avatar image
0 Votes"
MarkMather-7608 asked ·

Side panel for open tabs for beginners

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 docs 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.

7899-tab5.png




  <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>
windows-uwp
tab5.png (5.5 KiB)
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

RoyLi-MSFT avatar image
0 Votes"
RoyLi-MSFT answered ·

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>
         <!--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>
         <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>
    
    
    
         <!-- the side panel-->
         <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!

· 17 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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

0 Votes 0 ·

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.

0 Votes 0 ·

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

0 Votes 0 ·
Show more comments

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

0 Votes 0 ·
Show more comments
MarkMather-7608 avatar image
0 Votes"
MarkMather-7608 answered ·
 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>
·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MarkMather-7608 avatar image
0 Votes"
MarkMather-7608 answered ·
 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)
         {
               
         }
     }
     }
· 7 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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>
0 Votes 0 ·

Did i do something wrong is this supposed to look like this

7900-mmjj2.png


0 Votes 0 ·
mmjj2.png (227.0 KiB)

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

0 Votes 0 ·
Show more comments