UWP grid to fill parent window - c#

We are working on a school project and has run into a dead end. We are trying to make the grid fill the entire parent window but we are simply not able to do so.
This is what the designer shows and how we want it to look:
And this is how it looks when we run it:
Here is our xaml code:
<Grid x:Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, RelativeSource = {RelativeSource Mode=TemplatedParent}}" Height="{Binding ActualHeight, RelativeSource ={RelativeSource Mode=TemplatedParent}}">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
</Grid.Background>
<!--Search section-->
<RelativePanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ElementName=Grid,Path=ActualWidth}">
<TextBlock Text="Find available apartment" FontSize="24" Margin="30" RelativePanel.AlignHorizontalCenterWithPanel="True" />
<AutoSuggestBox Name="AutoSuggestBox"
PlaceholderText="Search"
Width="300"
RelativePanel.AlignHorizontalCenterWithPanel="True"
Margin="0,100,0,0"
TextChanged="AutoSuggestBox_OnTextChanged"
Header="Destination:"/>
<CalendarDatePicker Name="CheckInPicker" Header="Check in:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,40,0,0" PlaceholderText="select a date" IsTodayHighlighted="False"/>
<CalendarDatePicker Name="CheckOutPicker" Header="Check out:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignRightWith="AutoSuggestBox" Margin="0,40,0,0"/>
<ComboBox x:Name="numberOfGuestsBox" Width="127" RelativePanel.Below="CheckInPicker" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,30,0,0" PlaceholderText="Choose" Header="Guests:" FontSize="15">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
</ComboBox>
<ToggleSwitch Header="Smoking allowed?" Margin="0,30,0,0" RelativePanel.Below="CheckOutPicker" RelativePanel.AlignLeftWith="CheckOutPicker" OffContent="Eew - No!" OnContent="Ya man!"/>
<Button x:Name="SearchButton" Content="Search available apartments" RelativePanel.Below="numberOfGuestsBox" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,30,0,30" Width="300" Height="50" Background="MediumSeaGreen" Foreground="AliceBlue" Click="SearchButton_Click"/>
</RelativePanel>
</Grid>
How do we go about this?
We have tried what to us seems everything with stretching. Margin is not really an option as we want it to be able to re-size.
It seems like (to us) that the grid is fitting the relative panel and shrinks to that size. We are somewhat sure that if we get the grid to fit the screen size of the window the relative panel will be placed in the middle. Thanks for your help in advance!
Edit:
We hold the "views" inside a frame that might be causing the problem. When i re-size the frame the image re-sized and the splitview moves to the "middle" but the scaling doesn't work on the splitview nor the picture.
Here is the code for the splitview:
<!--Split View-->
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="48"
HorizontalAlignment="Left">
<!--SplitView Pane for icons-->
<SplitView.Pane>
<ListBox Name="IconsLIstBox" SelectionMode="Single" SelectionChanged="IconsLIstBox_OnSelectionChanged">
<ListBoxItem Name="HomeListItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Home" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="LocationsListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Locations" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MostPopularListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Most Popular" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MapListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Map" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ProfileListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Profile" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ContactListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Contact" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<!--SplitView Content-->
<Frame x:Name="MyFrame" HorizontalAlignment="Left" Width="1043"/>
</SplitView>
</Grid>
We've tried with the frame being inside a splitview.content but there is no difference between the two.

You're trying to hard :) Sometimes XAML can be easy.
Container controls like Grid and RelativePanel automatically scale to the full available size of their parent, while others like StackPanel only grow to the minimal size needed for their child elements. Only the latter type needs HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" to fill the screen. Never bind the Width/Height properties.
This should be enough to go full screen (if your grid is directly under a page and not in a StackPanel or similar control):
<Grid x:Name="Grid">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
</Grid.Background>
<!--Search section-->
<RelativePanel>
...
</RelativePanel>
</Grid>
Edit in reply to added code of the splitview in the question:
I noticed both SplitView and Frame have HorizontAlignment="Left". That's saying: "instead of using my full screen, only use whatever size you minimally need and align to the left". Remove those assignments and the width of your Frame. Prevent using alignments (left/right/center) or sizes (width/height) when you want to fill your parent control.
<!--Split View-->
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="48">
....
<!--SplitView Content-->
<Frame x:Name="MyFrame" />
</SplitView>

Related

How to horizontally align controls?

I'm trying to align below controls horizontally by keeping the label and the combobox on the left and both buttons on the right. I've tried different approaches using StackPanel but nothing gives me the desired output. Appreciate if you guys could point out what am I doing wrong here?
Current Layout
XAML source
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Center" Orientation="Vertical" Margin="0,0,0,2" >
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Center">
<Label Content="Age Bucket" HorizontalAlignment="Left" VerticalAlignment="Center" />
<ComboBox HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Width="100"
SelectedValue="{Binding SelectedAgeBucket}"
DisplayMemberPath="DisplayMember" SelectedValuePath="ValueMember"
ItemsSource="{Binding AgeBuckets}" IsSynchronizedWithCurrentItem="True"/>
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal" Margin="0,0,0,2">
<Button Click="Button_Click_1" Content="Export" HorizontalAlignment="Right" />
<Button HorizontalAlignment="Right" VerticalAlignment="Center" Click="Button_Click_2" Content="Print" Margin="5,0" />
</StackPanel>
</StackPanel>
<telerik:RadDataPager x:Name="radDataPager" Source="{Binding Items, ElementName=grdDetails}" PageSize="100" />
</StackPanel>

WPF multicolumn listbox performance while scrolling

How can I create a multicolumn ListView/ListBox in WPF with good performance. I know how to do it with WrapPanel. In the ListBox I have about 70-150 items and scrolling is laggy/not so fluent (like with VirtualStackPanel). Do you know how to solve this problem?
Thank you
Here is ListBox XAML
<ListBox x:Name="ListBoxSubtitles" VirtualizingStackPanel.IsVirtualizing="True" Margin="0,0,0,0" ItemsSource="{Binding Subtitle,Mode=TwoWay}" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="{x:Null}" Background="#FFEEECEC"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="520" Height="150" Background="#FF424242" Margin="5,5,5,0">
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding PosterImgUri,Mode=TwoWay}" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill">
<Image.Effect>
<BlurEffect Radius="40" />
</Image.Effect>
</Image>
<Image Width="75" Height="110" Grid.Column="0" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Stretch" Source="{Binding PosterImgUri,Mode=TwoWay}" Stretch="Fill"/>
<Label Grid.Column="0" Content="86%" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Bottom" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="18" FontWeight="Bold"/>
<StackPanel Grid.Column="1">
<Label HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="25" FontWeight="Bold">
<TextBlock TextWrapping="Wrap" Text="{Binding SubtitleName,Mode=TwoWay}">
</TextBlock>
</Label>
<Grid>
<Label Content="Stažení:" HorizontalAlignment="Left" Margin="0,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/>
<Label Content="{Binding subtitleName,Mode=TwoWay}" HorizontalAlignment="Left" Margin="65,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/>
</Grid>
<Grid Width="100" Height="20" Margin="0,0,0,0" HorizontalAlignment="Left">
<ProgressBar Value="50" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="7,0,0,0" Foreground="#FF84E60F" Background="White"/>
<Label Margin="0,-2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Content="50" FontSize="10" FontWeight="Bold"></Label>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
also I would like to ask, how to remove this blue selection when mouse is focusing item.
You need a virtualizing wrap panel. Unfortunately, writing such kind of panel is not easy and most good implementations are either not free or not working for arbitrary complex data templates.
You can make the image bindings async, using the IsAsync property.
Another approach is to reduce the visual tree, which is not an option, because you go after quality. You can move the layout from the DataTemplate into a dedicated UserControl and load the images only when the control is visible (VisibilityChanged event or rectangle intersect based).

DataTemplate for Panorama header template displays nothing at run-time (Windows Phone/XAML)?

I have a Windows Phone 8 project using C#. I created a DataTemplate in my App.xaml file as a resource. I then set the HeaderTemplate property for my PanoramaItem object for that page to use that DataTemplate as a static resource. When I run the app nothing displays in the area reserved for the Header. However, the same XAML code block that I turned into a DataTemplate works fine when it is inline on the page that contains the PanoramaItem object. Why is this happening and how can I fix this?
Here's the original inline XAML code for the PanoramaItem detail page:
<phone:Panorama x:Name="PanoramaMilitaryRobots_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaMilitaryRobots_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="PanoramaMilitaryRobots_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="420" Height="240"/>
</StackPanel>
</phone:PanoramaItem.Header>
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaMilitaryRobots_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaMilitaryRobots_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaMilitaryRobots_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaMilitaryRobots_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>
Here is the XAML code for the DataTemplate I created in the ApplicationResources section of my App.xaml file:
<DataTemplate x:Key="PanoramaItemHeaderTemplate">
<StackPanel Orientation="Horizontal" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="420" Height="240"/>
</StackPanel>
</DataTemplate>
Here is the new XAML code for the PanoramaItem that is now set to use the DataTemplate:
<phone:Panorama x:Name="PanoramaMilitaryRobots_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaMilitaryRobots_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="PanoramaMilitaryRobots_DetailVideos0" Margin="0,0,0,25" HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaMilitaryRobots_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaMilitaryRobots_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaMilitaryRobots_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaMilitaryRobots_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>

Windows Phone SDK - XAML - automatic margin for the top margin

I have the following XAML in my Windows Phone app:
<StackPanel Orientation="Horizontal">
<Grid x:Name="LayoutRoot">
<Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
<TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" Margin="150,20,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
<TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" Margin="150,150,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
</Grid>
</StackPanel>
Currently, I have the margin of the second TextBlock (DescriptionBlock) set to a static value. Now because I have the work wrapping of the first TextBlock (NameBlock) set to "Wrap", the height of the TextBlock is variable.
Does anyone know how to make the top-margin of DescriptionBlock equal to the automatic height of NameBlock? This would ensure that the second DescriptionBlock appears directly below the NameBlock, regardless of the length of the text of NameBlock.
Many thanks!
Brett
This is what panels are for. Wrap the two text blocks in stack panel and it will stack the text blocks one above the other.
<Grid x:Name="LayoutRoot">
<Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
<StackPanel Margin="150,20,0,0" Width="300">
<TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" TextWrapping="Wrap" HorizontalAlignment="Left" />
<TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" TextWrapping="Wrap" HorizontalAlignment="Left" />
</StackPanel>
</Grid>
A panel that holds a single child is usually useless, so I removed the stack panel around the grid.
If you'd like to continue using Grid you can define rows for it to size automatically.

how to acess on controls inside of stackpanel in windows phone7?

i design page bellow code.
<ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1" x:Name="svProduct">
<StackPanel>
<ItemsControl x:Name="lstSearchResult" ItemsSource="{Binding Path=PIProductList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="480" Style="{Binding CellStyle}" Orientation="Horizontal" VerticalAlignment="Center" Height="50" >
<TextBlock Foreground="Black" FontSize="20" Width="320" FontFamily="Tahoma" Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="btnBookmark" Click="btnBookmark_Click" Tag="{Binding}" Background="Transparent">
<Button.Content>
<Image Source="/Images/bookmarks_red.png" Width="33" Height="30" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
<Button BorderThickness="0" x:Name="btnSubmit" Click="btnSubmit_Click" Background="Transparent" Tag="{Binding}" >
<Button.Content>
<Image Name="ram" Source="/Images/blue_arrow.png" Width="40" Height="40" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
i want to access for btnBookmark visuble false .
can't access btnBookmark.Visibility=Visibility.collapsed
how to do this?
please help to me...........
The best way I know to do this is to create a Visiblity property on your item ViewModel (the one that is bound to each row in your ItemsControl) and toggle that value based on the changes to each item, presumably via the toggle button in each row. I don't know of a good way to "loop and look" for these internal controls. You're much better off using the existing data binding infrastructure to manage this for you.

Categories

Resources