I am to create a HamburgerMenu like Win10 apps. The HamburgerMenu base is the SplitView component and to distribute the children in SplitView I chose to use a RelativePanel, so I can choose which menu items will be on the top and which ones will be on the bottom, like Weather App.
However, in my app the bottom items do not have the same width as the top items.
I've tried several things, HorizontalAlignment="Stretch", binding between the top LitView and bottom ListView, but nothing changes.
The bottom ListView ignores any non-manual (non-fixed) width setting.
Below is my XAML code.
<Grid x:Name="GridToMainPage">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel x:Name="RelatMainPanelTop" Background="#FFFF6800">
<Button x:Name="HamburgerMenuButton" Content="" FontFamily="Segoe MDL2 Assets" FontSize="22" VerticalAlignment="Stretch" Background="#FFFF6800" Height="39.5" Width="{Binding CompactPaneLength, ElementName=MainSplitView}" Click="OnHaburgerButtonClick"/>
<TextBlock x:Name="NavigationTitle" Text="Início" RelativePanel.RightOf="HamburgerMenuButton" Margin="10,0,0,0" FontSize="30" FontWeight="Bold"/>
<TextBox x:Name="MainSearchTextBox" Width="200" PlaceholderText="Buscar" RelativePanel.AlignVerticalCenterWithPanel="True" RelativePanel.LeftOf="MainSearchButtom"/>
<Button x:Name="MainSearchButtom" Content="" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" FontFamily="Segoe MDL2 Assets" FontSize="20" Margin="0,0,10,0"/>
</RelativePanel>
<SplitView x:Name="MainSplitView" Grid.Row="1" DisplayMode="CompactOverlay" CompactPaneLength="43" OpenPaneLength="{Binding Width, ElementName=HamburgerMenuListView1}">
<SplitView.Pane>
<RelativePanel x:Name="MainSplitRelativPanel">
<ListView x:Name="HamburgerMenuListView1">
<ListViewItem x:Name="HomeSplittem">
<StackPanel x:Name="HomeStackPanelViewItem" Orientation="Horizontal">
<TextBlock x:Name="HomeIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
<TextBlock x:Name="HomeTextSplitItem" FontSize="18" Text="Início" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="PersonsSplitItem">
<StackPanel x:Name="PersonsStackPanelViewItem" Orientation="Horizontal">
<TextBlock x:Name="PersonsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
<TextBlock x:Name="PersonsTextSplitItem" FontSize="18" Text="Pessoas" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="MediaSplitItem">
<StackPanel x:Name="MediaStackPanelViewItem" Orientation="Horizontal">
<TextBlock x:Name="MediaIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
<TextBlock x:Name="MediaTextSplitItem" FontSize="18" Text="Mídias" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="MovementsSplitItem">
<StackPanel x:Name="MovementsStackPanelViewItem" Orientation="Horizontal">
<TextBlock x:Name="MovementsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
<TextBlock x:Name="MovementsTextSplitItem" FontSize="18" Text="Movimentações" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="CashDeskSplitItem">
<StackPanel x:Name="CashDeskStackPanelViewItem" Orientation="Horizontal">
<TextBlock x:Name="CashDeskIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
<TextBlock x:Name="CashDeskTextSplitItem" FontSize="18" Text="Caixa" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="ReportsSplitItem">
<StackPanel x:Name="ReportsStackPanelViewItem" Orientation="Horizontal">
<TextBlock x:Name="ReportsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
<TextBlock x:Name="ReportsTextSplitItem" FontSize="18" Text="Relatórios" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
</StackPanel>
</ListViewItem>
<ListViewItem x:Name="ConfigSplitItem">
<StackPanel x:Name="ConfigStackPanelViewItem" Orientation="Horizontal">
<TextBlock x:Name="ConfigIconSplitItem" FontSize="18" Text="" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
<TextBlock x:Name="ConfiTextSplitItem" FontSize="18" Text="Configurações" Margin="12.5,0,0,0"/>
</StackPanel>
</ListViewItem>
</ListView>
<ListView x:Name="HambugerMenuListView2" RelativePanel.AlignBottomWithPanel="True" HorizontalAlignment="Stretch" Margin="0,0,0,20" Width="181">
<ListViewItem x:Name="LoginSplitItem" HorizontalAlignment="Stretch">
<StackPanel x:Name="LoginStackPanelViewItem" Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock x:Name="LoginIconSplitItem" FontSize="18" Text="" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
<TextBlock x:Name="LoginTextSplitItem" FontSize="18" Text="User Name" Margin="12.5,0,0,0"/>
</StackPanel>
</ListViewItem>
</ListView>
</RelativePanel>
</SplitView.Pane>
</SplitView>
</Grid>
Actually there's a much simpler way to achieve what you want.
You kinda did it with this line of code -
OpenPaneLength="{Binding Width, ElementName=HamburgerMenuListView1}"
Since you haven't actually specified the Wdith of HamburgerMenuListView1, the Width will always be double.NaN. This is basically equivalent to this -
OpenPaneLength="Auto"
The default value of OpenPaneLength is 320, since you have set it to Auto, the width of the side panel will basically be stretched based on the max width of its children.
Your first ListView is clearly wider so the parent side panel will stretch to its width; your second ListView is shorter, and since its default horizontal alignment (inside a RelativePanel) is Left, you will see it's left-aligned as shown on your screenshot.
So, the real question is, how to stretch the second ListView to fit the whole side panel?
All you need is to add these two lines to the second ListView -
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Personally, I would prefer to leave the OpenPaneLength unchanged 'cause by doing this, to me it looks a bit weird as there's not enough gap between the items and the edges of the side panel. Or maybe simply reduce it a little bit to achieve the best visual result.
I got the answer on MSDN.
In practice it implements in code-behind something that should work through XAML Bindings.
The reason for not working is unknown to me.
The reason for not working is unknown to me.
It is because the ActualWidth does not raise property change notifications and should be thought of as a regular CLR property and not a dependency property as stated in the documentation on MSDN here: https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.actualwidth.aspx
Since the ActualWidth of the ListView in the Pane doesn't get updated you could set the Width programmatically instead of using a binding:
<RelativePanel x:Name="MainSplitRelativPanel" SizeChanged="MainSplitRelativPanel_SizeChanged">
...
</RelativePanel>
private void MainSplitRelativPanel_SizeChanged(object sender, SizeChangedEventArgs e)
{
HambugerMenuListView2.Width = HamburgerMenuListView1.ActualWidth;
}
Related
I would like to ceate a text block inside a scroll view. I want the scroll view to be automatic on every device and every screen size. But for the moment, I am forced to fix an height, in pixels. Otherwise, the scroll view will adapt to the text size... Without doing its scrolling job.
How to do this properly?
Thanks!
EDIT: here is my XAML:
<Grid>
<StackPanel Orientation="Vertical" Margin="10,10,10,10">
<ProgressBar x:Name="progressBar" IsIndeterminate="True" IsEnabled="True" />
<TextBlock x:Name="titleBlock" Text="" VerticalAlignment="Top" FontSize="48"/>
<TextBlock x:Name="subtitleBlock" Text="" TextWrapping="Wrap" FontSize="24" FontStyle="Italic"/>
<TextBlock x:Name="dateBlock" TextWrapping="Wrap" Text="" FontSize="24"/>
<ScrollViewer VerticalAlignment="Top" Height="370" VerticalScrollBarVisibility="Visible" Margin="0,15,0,0" VerticalScrollMode="Enabled" AllowDrop="False" BringIntoViewOnFocusChange="True" HorizontalScrollMode="Disabled" IsHoldingEnabled="True" >
<Grid>
<TextBlock x:Name="descriptionBlock" TextWrapping="Wrap" Text="" FontSize="14.667"/>
</Grid>
</ScrollViewer>
<Button x:Name="buttonViewFlyer" Click="buttonViewFlyer_Click" Content="Voir le flyer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,0"/>
<Button x:Name="buttonViewFacebookPage" Click="buttonViewFacebookPage_Click" Content="Page Facebook de l'évènement" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,0,5,5"/>
</StackPanel>
</Grid>
I want the scrollview to have a height that adapts with device screen size.
I have one problem - my stackpanel is vey big and it breaks(background color is changed to black).. What should i do to improve it?
<Grid x:Name="LayoutRoot" Background="#FF2D2D2D" >
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Orientation="Horizontal" Grid.Row="0">
..
</StackPanel>
<ScrollViewer Name="viewer" Grid.Row="1" >
<StackPanel Name="ContentGrid" Canvas.ZIndex="1" Margin="0, 0,0,80" Background="White" Width="452">
<Image Name="ImageImage" Height="300" VerticalAlignment="Top"/>
<TextBlock Name="DateText" TextWrapping="Wrap" TextAlignment="Center" FontSize="18" Foreground="Black"/>
<TextBlock Name="TitleText" TextWrapping="Wrap" FontSize="20" TextAlignment="Center" Foreground="Black" Margin="10,0"/>
<TextBlock TextWrapping="Wrap" Margin="10,15,10,2" Name="DescroptionText" FontSize="23" Foreground="#FF494949" FontFamily="Portable User Interface"/>
<TextBlock TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,10,2" Name="DescroptionText2" FontSize="23" Foreground="#FF494949"/>
<ListBox SelectionChanged="GridImages_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" Name="GridImages" ItemTemplate="{StaticResource AttachmentsItemTemlate}" Grid.RowSpan="2" FontFamily="Portable User Interface" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" FlowDirection="LeftToRight" ItemWidth="150" ItemHeight="150"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</StackPanel>
</ScrollViewer>
</Grid>
There is a limitation of 2048px in Windows Phone UIElements.
You should try to break your different elements into smaller elements (for example: you could put several stackpanels inside the first one).
In TextBox elements there is a workaround explained here.
Best this is to make the Main Window to white background and Make your stackpanel as transparent background instead of giving any color to it. It works great as I have tested it.
Try this code, but first you need to add windows toolkit library.
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
<toolkit:PhoneTextBox
TextWrapping="Wrap"
Name="txtString"
ScrollViewer.VerticalScrollBarVisibility="Visible"
MaxHeight="200"
PlaceholderText="Add text"
Padding="5"
Width="370"
FontFamily="Open Sans Light"
FontSize="22"
Height="Auto" ///Use Auto or provide height value
Margin="10"
/>
This code is used for Scrolling as well work for Auto Growing Textbox. If you don't want Auto Growing Textbox then provide height instead of Auto in Height attribute.
I have an app that is based on the Panorama control. Clicking on an item on one of the Panorama control's pages (tabs) goes to a details page. On that details page I have the XAML below that renders the item content. As you can see there is a TextBlock hosted by a StackPanel in the phone:PanoramaItem.Header element. I want the text in that element to wrap the video title the TextBlock is bound to in the view model. I have TextWrapping set to wrap and I have assigned it a fixed width so the TextBlock doesn't grow/expand (and therefore won't wrap). The text does wrap, but some lines still appear clipped with some words appearing "cut off". What is wrong with my XAML?
I read about using a DockPanel instead:
TextBlock Wrapping in WPF Layout
But this app has a StackPanel used on a lot of different pages so if I can stick with a StackPanel I'd prefer it.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Visibility="{Binding IsInternetAvailable}" Background="{StaticResource PhoneAccentBrush}" Height="30">
<TextBlock Text="{Binding Path=LocalizedResources.NoConnection, Source={StaticResource LocalizedStrings}}" Margin="10, 0"/>
</Grid>
<phone:Panorama x:Name="PanoramaFavorites_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaFavorites_DetailVideos_SelectionChanged">
<phone:Panorama.Title>
<StackPanel Orientation="Horizontal" Margin="0,15,0,0">
<Image Height="85" Width="85" Source="http://appstudiodata.blob.core.windows.net/apps/1383/db936107-bce6-41a2-9d95-1d342f66c6bb/res/Logo-b3883645-a6cd-4cc8-82be-97c87a266656.png" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,10,5" RenderTransformOrigin="0.5,0.5" />
<TextBlock FontSize="92" Text="Robot Videos" FontFamily="Segoe WP Light" Foreground="{StaticResource CustomTitleApplicationTextBrush}" VerticalAlignment="Stretch"/>
</StackPanel>
</phone:Panorama.Title>
<phone:PanoramaItem x:Name="PanoramaFavorites_DetailVideos0" Margin="0,0,0,25">
<phone:PanoramaItem.Header>
<StackPanel Orientation="Horizontal" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="440" Height="170"/>
</StackPanel>
</phone:PanoramaItem.Header>
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaFavorites_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaFavorites_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaFavorites_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaFavorites_DetailVideos0}">
<ctl:FlipControl.InnerContent>
<Grid Margin="10,5,5,5">
<ScrollViewer>
<ctl:YouTubePlayer Margin="0,10" MaxHeight="250" VerticalAlignment="Top" VideoId="{Binding CurrentYouTubeVideo.VideoId, TargetNullValue={StaticResource DefaultNoImageValue}}"/>
</ScrollViewer>
</Grid>
</ctl:FlipControl.InnerContent>
</ctl:FlipControl>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
As per your comments, this works for me:
<StackPanel Orientation="Vertical" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}"
Foreground="{StaticResource CustomApplicationTextBrush}"
FontSize="36"
TextWrapping="Wrap"
MaxWidth="440"/>
</StackPanel>
I have some Canvases in a ListBox. Inside these Canvases I have some TextBlocks which have their text bound to them. However when I try to use a MaxWidth/Height property on the text block (or the standard Height/Width), the properties are ignored! So I end up with the text overspilling the Canvas in cases.
I would much appreciate any help on the matter, and I hope I'm not just being a blind idiot!
Oh, and here's the code (the TextBlock I'm talking about is the first one):
<ListBox Margin="0,-9,-12,0" ItemsSource="{Binding}" Name="listBoxNotes" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="548">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Canvas Height="175" Width="360" Background="{StaticResource PhoneAccentBrush}" toolkit:TiltEffect.IsTiltEnabled="True" Name="canvasNote" Tap="canvasNote_Tap">
<TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="26" Foreground="White" Canvas.Left="10" Canvas.Top="5" x:Name="Title" Width="100" MaxWidth="100"/>
<TextBlock Text="{Binding Details}" TextWrapping="Wrap" Width="352" FontSize="24" Foreground="White" Canvas.Left="10" Canvas.Top="35" />
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem with this is Canvas does not limit the size of their children, and especially theTextBlock control will grow as much as it needs.
Many ways to solve your problem :
Do not use TextBlock but a TextBox
Do not use Canvas but another container such as Border, Grid, StackPanel...
Try to clip the TextBlock content
<TextBlock.Clip>
<RectangleGeometry Rect="0, 0, 50, 30"/>
</TextBlock.Clip>
I must be missing something simple here...I am writing a Windows Phone 7 app and I have customized my pivot header to be the following:
<controls:Pivot Name="InfoPivot">
<controls:Pivot.TitleTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" VerticalAlignment="Top">
<Rectangle Fill="{Binding CategoryFill}" Height="50" Width="50" Margin="355,25,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="CategoryRect" />
<StackPanel Margin="-425,-14,0,0" Width="432">
<TextBlock x:Name="StationTitle" Text="{Binding StationTitle}" Margin="10,0,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<TextBlock Name="LocationTitle" Text="{Binding LocationTitle}" TextWrapping="Wrap" Margin="12,0,0,20" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</controls:Pivot.TitleTemplate>
When I navigate to this page, I pass Station and Location as parameters, and in the OnNavigatedTo() for this page I try to set the StationTitle and LocationTitle. Unfortunately, I end up getting:
Error 2 The name 'StationTitle' does not exist in the current context
How should/do we go about accessing members in the Pivot TitleTemplate? Any help will be appreciated! Thanks.
Stop using the title template and binding to acheive this. Try this instead:-
<controls:Pivot Name="InfoPivot">
<controls:Pivot.Title>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" VerticalAlignment="Top">
<Rectangle Fill="{Binding CategoryFill}" Height="50" Width="50" Margin="355,25,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="CategoryRect" />
<StackPanel Margin="-425,-14,0,0" Width="432">
<TextBlock x:Name="StationTitle" Margin="10,0,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<TextBlock x:Name="LocationTitle" TextWrapping="Wrap" Margin="12,0,0,20" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
</controls:Pivot.Title>
Then in code-behind:-
if (NavigationContext.QueryString.TryGetValue("Station", out station))
{
StationTitle.Text = station;
}
if (NavigationContext.QueryString.TryGetValue("LocationTitle", out locationTitle))
{
LocationTitle.Text = locationTitle;
}
Without seeing all of your code, this may be as simple as making the Name declaration consistent on your two TextBlocks.
Note, one is Name="", the other is x:Name="".
Defining the template inline worked for me, The TitleTemplate just wouldn't work.
<phone:Pivot>
<phone:Pivot.Title>
<TextBlock Margin="0"
Text="{Binding Exercise.Name}"
Style="{StaticResource MainTitleStyle}"/>
</phone:Pivot.Title>
</phone:Pivot>