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)
{
}
}
}
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 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
Sort by: Newest
-
Mark Mather 156 Reputation points
2020-05-04T07:18:24.93+00:00 -
Mark Mather 156 Reputation points
2020-05-04T07:17:49.733+00:00 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="" /> </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="" 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="" 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="" FontFamily="Segoe MDL2 Assets" Margin="154,11,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.485,0.852" Height="31" Width="45" Background="#33FFFFFF"/> <Button Content="" 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>
-
Roy Li - MSFT 32,486 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> <!--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!