After installing update 1 for Visual Studio 2015, SplitView control for UWP broken on Windows 10. As you know, SplitView have 2 sub items, an object grid and pane.
Now, an XAML error says that, "You cannot insert a object into SplitView".
I'm trying move object grid outside of SplitView. It is running at this case. However, the grid could not fitting the UI.
In addition to this, when I try adding new SplitView control to the page, it thrown a NullReferenceException.
I have not any issues like that on VS 2015 RTM. Are anyone encountered with this issue ?
Thanks...
My XAML Code is here:
<SplitView x:Name="MenuViewer" Margin="0" OpenPaneLength="200" PaneBackground="{StaticResource BorderColor}" RequestedTheme="Light" DisplayMode="CompactOverlay" FontSize="16" PaneClosing="MenuViewer_PaneClosing">
<SplitView.Pane>
<Grid x:Name="PanelGrid" ManipulationCompleted="PanelGrid_ManipulationCompleted" ManipulationMode="TranslateX">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="MenuButtonGrid" Margin="0" Background="{StaticResource Dark Main Color}" RequestedTheme="Light">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" Click="HamburgerButton_Click" VerticalAlignment="Center" Foreground="White" HorizontalAlignment="Center" RequestedTheme="Light" FontSize="16" Width="48" Height="48"/>
<TextBlock x:Name="MenuText" Grid.Column="1" Margin="10,12" TextWrapping="Wrap" Text="Menu" Foreground="White" RequestedTheme="Light" FontSize="16"/>
</Grid>
<Grid x:Name="MenuStack" Margin="0,10,0,0" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.Transitions>
<TransitionCollection>
<EdgeUIThemeTransition Edge="Bottom"/>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.Transitions>
<StackPanel x:Name="UserDetailPanel" Orientation="Vertical">
<Image x:Name="UserImage" Source="ms-appx:///Images/ProfileHolder.png" Width="100" Height="100" Margin="0"/>
<TextBlock x:Name="UserName" TextWrapping="Wrap" Text="" FontSize="16" Margin="10,0" TextAlignment="Center"/>
<Border x:Name="LogoutBorder" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="0,0,0,1" Margin="0,10,0,0" PointerEntered="LogoutBorder_PointerEntered" PointerExited="LogoutBorder_PointerExited" PointerPressed="LogoutBorder_PointerPressed" BorderBrush="{StaticResource TextColor}" >
<TextBlock x:Name="LogoutText" TextWrapping="Wrap" Text="Logout" Foreground="#FF777777" TextAlignment="Center"/>
</Border>
</StackPanel>
<ListView x:Name="MenuList" ItemsSource="{Binding Menu}" ItemTemplate="{StaticResource ListView_TripItemTemplate}" FontSize="16" SelectionChanged="MenuList_SelectionChanged" Margin="-10,10,0,0" Grid.Row="1" VerticalAlignment="Top" />
<ListView x:Name="MenuList_2" ItemsSource="{Binding Second_menu}" ItemTemplate="{StaticResource ListView_TripItemTemplate}" FontSize="16" VerticalAlignment="Bottom" SelectionMode="None" Margin="-10,0,0,48" Grid.Row="2" />
</Grid>
</Grid>
</SplitView.Pane>
<Grid x:Name="Main" Background="{StaticResource Background}" ManipulationMode="TranslateX" ManipulationCompleted="Main_ManipulationCompleted">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="Header" Margin="0" Background="{StaticResource Dark Main Color}">
<Grid.Transitions>
<TransitionCollection/>
</Grid.Transitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="64"/>
</Grid.ColumnDefinitions>
<Button x:Name="HamburgerButton2" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" Click="HamburgerButton_Click" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Center" Foreground="White" FontSize="16" RequestedTheme="Light" Visibility="Collapsed"/>
<Button x:Name="AddButton" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" Click="AddButton_Click" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Center" Foreground="White" FontSize="16" Grid.Column="3" RequestedTheme="Light" Width="64" Height="48"/>
<AutoSuggestBox x:Name="SearchBar" Grid.Column="2" VerticalAlignment="Center" Margin="10,0" PlaceholderText="Search" FontSize="16" Style="{StaticResource AutoSuggestBoxStyle_TripLog}" BorderThickness="0" QuerySubmitted="SearchBar_QuerySubmitted" Background="#B2E9E9E9">
<AutoSuggestBox.QueryIcon>
<SymbolIcon Symbol="Find"/>
</AutoSuggestBox.QueryIcon>
</AutoSuggestBox>
<Button x:Name="Search_Button" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" Click="Search_Button_Click" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Right" Foreground="White" FontSize="16" Grid.Column="2" RequestedTheme="Light" Width="64" Height="48" Visibility="Collapsed"/>
<TextBlock x:Name="Operation_Header" Margin="10,12" TextWrapping="Wrap" Text="Test" FontSize="16" Foreground="White" RequestedTheme="Light" Grid.ColumnSpan="2"/>
</Grid>
<Grid x:Name="MobileSearch_Grid" Grid.Row="1" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<AutoSuggestBox x:Name="SearchBar_Mobile" VerticalAlignment="Stretch" Margin="10,5" PlaceholderText="" FontSize="16" Style="{StaticResource AutoSuggestBoxStyle_TripLog}" BorderThickness="0,0,0,13" QuerySubmitted="SearchBar_QuerySubmitted" Background="#B2E9E9E9"/>
</Grid>
</Grid>
</SplitView>
Answer which comes from Microsoft Connect solves my issue. Thanks for contiributions.
Hi.
We have worked with the Windows SDK team to get this fixed in a future
version of the Windows Software Development Kit. We have a workaround
that should fix the issue for you. Please "repair" the install, by
opening "Add or remove programs," and repairing the "Windows Software
Development Kit" matching the version 10.0.10586.15.
Thank you!
Jeremiah
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 3 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I'm getting this error while trying to develop my app, the compilator said that it could not find an error code. So I don't have more information. I know that the error is generated while trying to initializeComponent.
Here is the code of my page:
<RelativePanel Padding="40">
<Image x:Name="logo" Source="ms-appx:///Assets/UPSA.jpg" Width="150" Height="200"/>
<Border RelativePanel.RightOf="logo" Height="200" RelativePanel.AlignRightWithPanel="True" Background="Orange" UseLayoutRounding="True" CornerRadius="40,40,40,40" Margin="30,0,0,0" />
<TextBlock Text="Universidad Pontifica de Salamanca" FontSize="72" RelativePanel.RightOf="logo" RelativePanel.AlignRightWithPanel="True" HorizontalAlignment="Center" FontFamily="Cooper Black" RelativePanel.AlignVerticalCenterWith="logo"/>
<Grid Margin="30" x:Name="mainGridL" RelativePanel.Below="logo" Height="500" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<RelativePanel Grid.Column="0" >
<TextBlock x:Name="textPersonal" Text="Datos Personales" FontSize="60" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="Orange"/>
<Line x:Name="lineBText" Stroke="Black" RelativePanel.Below="textPersonal" Width="770" StrokeThickness="20" X1="0" X2="770"/>
<Line x:Name="lineMid" Stroke="Black" RelativePanel.Below="textPersonal" Width="770" StrokeThickness="20" X1="770" X2="770" Y1="0" Y2="420" />
<Grid RelativePanel.Below="lineBText" Margin="0,20,0,0" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="textDni" Text="Dni" FontSize="35" VerticalAlignment="Center" Margin="30,0,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="textEmail" Text="Email" FontSize="35" VerticalAlignment="Center" Margin="30,0,0,0" />
<TextBox Grid.Row="1" Grid.Column=" 0" x:Name="nifBox" PlaceholderText="DNI..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="29,0,30,0" />
<TextBox x:Name="emailBox" Grid.Row="1" Grid.Column="1" PlaceholderText="Email..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="30,0,30,0" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Nombre" FontSize="35" VerticalAlignment="Center" Margin="30,0,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="Apellidos" FontSize="35" VerticalAlignment="Center" Margin="30,0,0,0"/>
<TextBox x:Name="nameBox" Grid.Row="3" Grid.Column=" 0" PlaceholderText="Nombre..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="30,0,30,0" />
<TextBox x:Name="surnameBox" Grid.Row="3" Grid.Column="1" PlaceholderText="Apellido..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="30,0,30,0" />
<TextBlock Grid.Row="4" Grid.Column="0" Text="Genero" FontSize="35" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<RadioButton Grid.Row="5" Grid.Column="0" x:Name="genderMale" Content="Hombre" FontSize="20" HorizontalAlignment="Center" Grid.ColumnSpan="2"/>
<RadioButton Grid.Row="6" Grid.Column="0" x:Name="genderFemale" Content="Mujer" FontSize="20" HorizontalAlignment="Center" Grid.ColumnSpan="2"/>
</Grid>
</RelativePanel>
<RelativePanel Grid.Column="1">
<TextBlock x:Name="textIns" Text="Datos Inscripcion" FontSize="60" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="Orange"/>
<Line x:Name="lineBTextIns" Stroke="Black" RelativePanel.Below="textIns" Width="770" StrokeThickness="20" X1="0" X2="770"/>
<StackPanel RelativePanel.Below="lineBTextIns" Orientation="Vertical" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="Titulacion cursada" FontSize="40" Margin="0,0,0,30"/>
<ComboBox x:Name="degreeName" PlaceholderText="Esoge tu titulacion" HorizontalAlignment="Center">
<x:String>ADET</x:String>
<x:String>Ing.Informatica</x:String>
<x:String>ADET + Ing.Informatica</x:String>
<x:String>Ing.Informatica + ADET</x:String>
</ComboBox>
<TextBlock Text="Escoge una charla" FontSize="40" Margin="0,0,0,30"/>
<ComboBox x:Name="activities" PlaceholderText="Escoge una charla" HorizontalAlignment="Center" ItemsSource="{Binding Name}"/>
</StackPanel>
</RelativePanel>
</Grid>
<Button RelativePanel.Below="mainGridL" Content="Enviar" FontSize="40" Margin="0,21,0,0" RelativePanel.AlignHorizontalCenterWithPanel="True" />
</RelativePanel>
After a long time of trying and error, I found where is the issue located. In the deepest Grid, the error is generated while trying to create TextBox, don't know why because if you just delete textBox it works properly.
Here is the error...
<Grid RelativePanel.Below="lineBText" Margin="0,20,0,0" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="textDni" Text="Dni" FontSize="35" VerticalAlignment="Center" Margin="30,0,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="textEmail" Text="Email" FontSize="35" VerticalAlignment="Center" Margin="30,0,0,0" />
<TextBox Grid.Row="1" Grid.Column=" 0" x:Name="nifBox" PlaceholderText="DNI..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="29,0,30,0" />
<TextBox x:Name="emailBox" Grid.Row="1" Grid.Column="1" PlaceholderText="Email..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="30,0,30,0" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Nombre" FontSize="35" VerticalAlignment="Center" Margin="30,0,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="Apellidos" FontSize="35" VerticalAlignment="Center" Margin="30,0,0,0"/>
<TextBox x:Name="nameBox" Grid.Row="3" Grid.Column=" 0" PlaceholderText="Nombre..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="30,0,30,0" />
<TextBox x:Name="surnameBox" Grid.Row="3" Grid.Column="1" PlaceholderText="Apellido..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="30,0,30,0" />
<TextBlock Grid.Row="4" Grid.Column="0" Text="Genero" FontSize="35" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<RadioButton Grid.Row="5" Grid.Column="0" x:Name="genderMale" Content="Hombre" FontSize="20" HorizontalAlignment="Center" Grid.ColumnSpan="2"/>
<RadioButton Grid.Row="6" Grid.Column="0" x:Name="genderFemale" Content="Mujer" FontSize="20" HorizontalAlignment="Center" Grid.ColumnSpan="2"/>
</Grid>
Thanks for helping.
Pay attention to this two lines:
<TextBox Grid.Row="1" Grid.Column=" 0" x:Name="nifBox" PlaceholderText="DNI..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="29,0,30,0" />
<TextBox x:Name="nameBox" Grid.Row="3" Grid.Column=" 0" PlaceholderText="Nombre..." FontSize="20" Background="Gray" VerticalAlignment="Center" Margin="30,0,30,0" />
You have an extra space before 0 value in the Grid.Column. You need to pass "0" instead of " 0".
Whenever the listview is loaded for the first time, it displays a flash of grey background for less than half a second and then disappears before the actual content is loaded. My code is as follows (pretty straight forward) Any thoughts?
<ListView Name="FilterCategories" SelectionMode="None"
FlowDirection="LeftToRight" >
<ListView.ItemContainerTransitions>
<TransitionCollection/>
</ListView.ItemContainerTransitions>
<ListView.ItemTemplate>
<DataTemplate x:DataType="filter:FilterCategory">
<Grid Name="FilterHeaders">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<TextBlock Name="Header" FontSize="13" FontWeight="Bold"
Margin="20,10,0,0" Text="{x:Bind NameAlias}"
Opacity="{x:Bind Opacity}"
Grid.Column="0"/>
</Grid>
<RelativePanel Grid.Column="1" Margin="0,5,15,0">
<TextBlock Name="DownArrow" Text="" FontFamily="Segoe MDL2 Assets" FontSize="8"
Visibility="{x:Bind IsCollapsed}" Grid.Column="1" TextAlignment="Left"
FontWeight="Bold"
Tapped="DownArrow_Tapped" RelativePanel.AlignRightWithPanel="True" Margin="0,10,10,0">
</TextBlock>
<TextBlock Name="UpArrow" Text="" FontFamily="Segoe MDL2 Assets" FontSize="8"
Visibility="{x:Bind IsExpand}" RelativePanel.AlignRightWithPanel="True"
TextAlignment="Left" FontWeight="Bold"
Tapped="UpArrow_Tapped" Margin="0,10,10,0">
</TextBlock>
</RelativePanel>
<Grid Grid.Row="1" Grid.ColumnSpan="2"
Visibility="{Binding ElementName=UpArrow,Path=Visibility}"
Margin="10,10,0,0">
<ListView SelectionMode="None" ItemsSource="{x:Bind FilterCategoryItems}"
ScrollViewer.VerticalScrollMode="Enabled">
<ListView.ItemContainerTransitions>
<TransitionCollection/>
</ListView.ItemContainerTransitions>
<ListView.ItemTemplate>
<DataTemplate x:DataType="filter:FilterCategoryItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="FilterCheckBoxTask" Style="{StaticResource CheckBoxStylePlainView}"
IsThreeState="False" Opacity="0.2"
MinWidth="10" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="{x:Bind NameAlias}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
<Border BorderThickness="0,0,0,1" Height="10"
HorizontalAlignment="Stretch"
BorderBrush="#f0f0f0" Grid.Row="2" Grid.ColumnSpan="2"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The item source is being set dynamically in the code behind
I am looking for a way to create a navigation pane using SplitView and other XAML controls.
I have tried creating something like the code below, but I failed as the controls aren't placed precisely in the center (vertically).
Also the buttons have this weird default animation that skews them when they are clicked. I want to turn it off but I don't know how.
All in all, I want to create a hamburger menu that is similar to Start menu in Windows 10 Anniversary Update. All opinions would be pretty appreciated.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Left" Width="319" DisplayMode="CompactOverlay">
<SplitView.Pane>
<StackPanel>
<Button x:Name="HamburgerButton" Width="320" Height="48" Click="HamburgerButtonClick" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Margin="0,1,0,0" />
<TextBlock Text="MENU" Margin="0,0,0,0" FontWeight="Bold" />
</StackPanel>
</Button>
<Button x:Name="TasksButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="Tasks" Margin="0,0,0,0"/>
</StackPanel>
</Button>
<Button x:Name="ArchivedButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="Archived" Margin="0,0,0,0"/>
</StackPanel>
</Button>
</StackPanel>
</SplitView.Pane>
</SplitView>
</Grid>
Here is what I want to achieve:
Screenshots: http://imgur.com/a/utNmC
MessiKing's Template 10 is a good idea and will save you a lot of time. No doubt in that. But that doesn't help you learn how XAML handles controls because they are all handled already by experts. However if you want to learn how it works in pure XAML without any 3rd Party Libraries, see below.
Your XAML will look something like below
<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Stretch" OpenPaneLength="150" DisplayMode="CompactOverlay" IsPaneOpen="True">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="HamburgerButton" Click="HamburgerButtonClick" Style="{StaticResource TextBlockButtonStyle}" FontWeight="Bold" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Padding="5" />
<TextBlock Text="MENU" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button x:Name="TasksButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="1">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Padding="5" />
<TextBlock Text="Tasks" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
<Button x:Name="ArchivedButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="2">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Margin="5" />
<TextBlock Text="Archived" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
</Grid>
</Grid>
</SplitView.Pane>
</SplitView>
Output
Now for the styling for buttons. Default Styling provided by Microsoft includes a StaticResource called TextBlockButtonStyle which will change your button styling to that of a TextBlock. Take a look at this.
Also there is a reason why I wrapped the List Items inside a Grid. because if you change
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top">
to
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Bottom">
you will see it something like below.
Good Luck and Happy Coding.
Dziewulski,
If you want to make a hamburgerMenu, using Template 10 would save you much time.
When you install the Template 10 in visual studio, you will be easy to create a project which contained a hamburgerMenu in it.
Please refer to these videos for details:Template 10 for Windows 10 Apps
Template 10: How to Build Your Universal Windows App
try the UWP Toolkit from Microsoft. It contains a hamburger menu:
https://github.com/Microsoft/UWPCommunityToolkit
!
I need to align the textblocks(PhoneTxt, CreateddateTxt ) which is present in listview.
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<ListBox Background="Transparent" HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1" Margin="6" VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="350" >
<Border Margin="5" BorderBrush="White" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="5,0,0,0" Grid.Row="0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
<TextBlock Grid.Row="0" Text=">" FontSize="28" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Margin="5,0,0,0" Grid.Row="1" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}" />
<TextBlock Margin="0,0,35,0" Grid.Row="2" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
#Schuere There is an big gap between them..After appplying your code
I need to display .(i.e in output)Print them as together each other in a same row with some space..
# fillobotto I need to display those textblocks together with one or two spaces in between them
Try this
<ListBox Background="Transparent" HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1" Margin="6" VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="350" >
<Border Margin="5" BorderBrush="White" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<TextBlock Margin="5,0,0,0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
<TextBlock Text=">" FontSize="28" Margin="5,0,0,0" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<TextBlock Margin="5,0,0,0" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}" />
<TextBlock Margin="5,0,0,0" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Orientation="Horizontal" was missing
create some extra columndefinitions:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitions Width="Auto"/>
<ColumnDefinitions Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="5,0,0,0" Grid.Row="0" Grid.Column="0" ColumnSpan x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text=">" FontSize="28" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Margin="5,0,0,0" Grid.Row="1" Grid.Column="0" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}" />
<TextBlock Margin="0,0,35,0" Grid.Row="1" Grid.Column="1" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</Grid>
This should change the outcome, the CreateddateTxt should be right next to PhoneTxt
I don't understand perfectly which TextBlock you want to align, but you shoud use a StackPanel control and set its Orientation property to Horizontal.
<ListBox Background="Transparent" HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1" Margin="6" VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="350" >
<Border Margin="5" BorderBrush="White" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="5,0,0,0" Grid.Row="0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
<TextBlock Grid.Row="0" Text=">" FontSize="28" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
<StackPanel Grid.Row="1">
<TextBlock Margin="5,0,0,0" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}" />
<TextBlock Margin="5,0,0,0" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
See the reference: https://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel.orientation%28v=vs.110%29.aspx
I inherited some code where I've seen this construction, which I'm not used to, in several locations:
<view:Content x:Name="TimeFrame" Margin="220,50,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" >
<view:Content.ChildContent>
<view:TimeFrame />
</view:Content.ChildContent>
</view:Content>
Which I must admit seems rather nifty, and thus far works as I want it too. However, then there's this where instead of the <view:TimeFrame />-tag in the center there are a regular control-tags like so:
<view:Content x:Name="SignInControl" Margin="466,317,0,0" HorizontalAlignment="Left" Width="348" Height="344" VerticalAlignment="Top">
<view:Content.ChildContent>
<Grid>
<Border CornerRadius="8,8,0,0" BorderThickness="1" Width="270" Height="300" Background="#666666" Margin="1,0,-1,0" Opacity="0.57" >
<Border.Effect>
<BlurEffect/>
</Border.Effect>
</Border>
<Border CornerRadius="8,8,0,0" BorderThickness="1" Width="270" Height="300" Background="#FFF3F5F4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="100"/>
<RowDefinition Height="25"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="ChartWizz" FontFamily="Verdana" FontSize="10" Margin="0,3,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton Style="{StaticResource up_down}" Checked="ToggleButton_Checked" />
<Image Source="Pictures/logo_250.png" Margin="5" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<StackPanel Width="210" Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" >
<TextBlock Text="Change User or" Margin="0,0,3,0" FontFamily="Verdana" FontSize="11" />
<Button Style="{StaticResource LinkButton}" Click="CreateNewAccLink_Click" Margin="2, 0, 0, 0">
<TextBlock Text="Create new account" FontFamily="Verdana" FontSize="11" Foreground="Black" TextDecorations="Underline"/>
</Button>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Vertical" HorizontalAlignment="Center" >
<TextBlock Text="Username" FontFamily="Verdana" FontSize="10" Margin="0,0,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBox Width="210" Height="20" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Row="4" Orientation="Vertical" HorizontalAlignment="Center" >
<TextBlock Text="Password" FontFamily="Verdana" FontSize="10" Margin="0,4,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<PasswordBox Width="210" Height="20" HorizontalAlignment="Left" />
</StackPanel>
<Grid Grid.Row="5" HorizontalAlignment="Left" >
<Button Style="{StaticResource LinkButton}" Click="ForgotPassLink_Click" Margin="2, 0, 0, 0" HorizontalAlignment="Left">
<TextBlock Text="Forgot your password?" Width="Auto" Foreground="Black" TextDecorations="Underline" FontFamily="Verdana" FontSize="10" Margin="27,5,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Button>
</Grid>
<StackPanel Grid.Row="7" Width="210" Margin="0,5,0,0" Orientation="Horizontal" HorizontalAlignment="Center" >
<CheckBox Content="Remember me" FontFamily="Verdana" FontSize="10" Margin="0,4,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Button Width="60" Content="Sign in" Height="23" Margin="55,0,0,0" VerticalAlignment="Center" Click="SiginBtn_Click" />
</StackPanel>
</Grid>
</Border>
</Grid>
</view:Content.ChildContent>
</view:Content>
When I attempted to give the controls here names so that I could access them in code I got the following error:
Cannot set Name attribute value 'txtBox_username' on element 'TextBox'. 'TextBox' is under the scope of element 'Content', which already had a name registered when it was defined in another scope.
I don't know if it's possible to access these members in some other way through the Content scope but if anyone would enlighten me I would be grateful. Either way I'd really like a link to a relevant MSDN page(or other resource) as I can't seem to figure out what to search for in order to learn more about type tags.
Thanks
This behaviour is caused by how UserControls are implemented, see this question for workarounds.