in my app i would like multiply section grids, these then go done the page one recantgle after another. The problem if i would like to add more sections but they go down below the app design. I have tried to add a stackpanel and stackviewer but neither work. The user should be able to scroll down and see all the sections.
Thank you in advance
The code looks somewhat like this;
<Grid Background="Teal">
<Grid HorizontalAlignment="Left" Height="163" VerticalAlignment="Top" Width="480">
</Grid>
<Grid Height="130" VerticalAlignment="Top" Margin="0,164,0,0">
</Grid>
<Grid Height="140" VerticalAlignment="Top" Margin="0,295,0,0">
</Grid>
<Grid x:Name="ContentPanel" Margin="0,435,0,129">
</Grid>
<Grid x:Name="ContentPanel2" Margin="0,435,0,129">
</Grid>
</Grid>
The user should be able to scroll down the page and see all the grids, as one grid is off the page.
You need to combine the <StackPanel> with a <ScrollViewer> to get the scrollable view, so something like:
<Grid Background="Teal">
<ScrollViewer>
<StackPanel>
<Grid HorizontalAlignment="Left" Height="163" VerticalAlignment="Top" Width="480">
...
</Grid>
<Grid Height="130" VerticalAlignment="Top">
...
</Grid>
<Grid Height="140" VerticalAlignment="Top">
...
</Grid>
<Grid x:Name="ContentPanel">
...
</Grid>
<Grid x:Name="ContentPanel2">
...
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
Related
I currently have a Pivot with 3 grids and a ScrollViewer with the same grids. As any software engineer would do, I would like to just have the code once, instead of twice. So my question is: How do I do this?
Got the solution: I put my three grids in three seperate DataTemplates and reference to those templates from within the Pivot and from within the ScrollViewer:
<Page.Resources>
...
<DataTemplate x:Key="JustANormalGridNr1">
<Grid />
</DataTemplate>
<DataTemplate x:Key="JustANormalGridNr2">
<Grid />
</DataTemplate>
<DataTemplate x:Key="JustANormalGridNr3">
<Grid />
</DataTemplate>
</Page.Resources>
<Grid x:Name="MasterGrid">
<Pivot>
<Pivot.Items>
<PivotItem>
...
<Grid>
<ContentControl ContentTemplate="{StaticResource JustANormalGridNr1}" /><!--instead of the grid, a reference to it -->
</Grid>
</PivotItem>
<PivotItem>
...
<Grid>
<ContentControl ContentTemplate="{StaticResource JustANormalGridNr2}" /><!--instead of the grid, a reference to it -->
</Grid>
</PivotItem>
<PivotItem>
...
<Grid>
<ContentControl ContentTemplate="{StaticResource JustANormalGridNr3}" /><!--instead of the grid, a reference to it -->
</Grid>
</PivotItem>
</Pivot.Items>
</Pivot>
<ScrollViewer>
<Grid>
<Grid>
...
<Grid Grid.Column="0">
...
<ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr1}" /><!-- Instead of the grid, a reference to it -->
</Grid>
<Grid Grid.Column="1">
...
<ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr2}" /><!-- Instead of the grid, a reference to it -->
</Grid>
<Grid Grid.Column="2">
...
<ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr3}" /><!-- Instead of the grid, a reference to it -->
</Grid>
</Grid>
</Grid>
</ScrollViewer>
</Grid>
I have a StackPanel representing the top bar and a Hub representing books items. Both wrapped in the grid with two rows.
The problem is that in design mode hub content aligned properly to the top, just below my top bar. But in emulator it looks like all content aligned to the center of the hub.
In design time it looks like this:
But in emulator it looks like this:
Here is my XAML code:
<Page.Resources>
<DataTemplate x:Key="HubSectionHeaderTemplate">
<TextBlock Margin="0,0,0,-10" Text="{Binding}" FontSize="19" FontFamily="Open Sans" FontWeight="Light" FontStretch="ExtraExpanded" Foreground="#FF30323E">
<!--<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>-->
</TextBlock>
</DataTemplate>
<!-- Grid-appropriate item template as seen in section 2 -->
<DataTemplate x:Key="Standard200x180TileItemTemplate">
<Grid Margin="0,0,15,15" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" VerticalAlignment="Top">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="165" Width="115"/>
<!--<TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>-->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,-25,0,0">
<StackPanel.Background>
<ImageBrush ImageSource="Assets/CatalogTopBar.png" Stretch="UniformToFill"/>
</StackPanel.Background>
<Button x:Name="searchButton" Margin="0,25,-30,0" Height="15" Width="10" Content="" HorizontalAlignment="Right" VerticalAlignment="Center" BorderThickness="0" >
<Button.Background>
<ImageBrush ImageSource="Assets/noun_23695_cc.png" Stretch="Uniform"/>
</Button.Background>
</Button>
</StackPanel>
<Hub x:Name="Hub" x:Uid="Hub" Grid.Row="1" Background="White" Margin="0,25,0,0" VerticalContentAlignment="Top" VerticalAlignment="Top">
<HubSection x:Uid="HubSection2" Header="Популярные книги" Width="Auto"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" >
<DataTemplate>
<GridView
Margin="0,-10,0,0"
ItemsSource="{Binding Items}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Page>
Ho-ho-ho... I finally managed to find the problem. After spending WEEKS!!! WEEKS, Carl! After spending few weeks I found out by accident that there is a MASSIVE "application name" <Hub.title> above my <Grid>.
It was not visible because of the white background and white font color of the text. By accidentally changing <RequestedTheme="Light"> I was finally able to see this text, because default font color changed to black. The text "application name" itself was not in my XAML source file, it was attached by localization facilities with x:Uid ="Hub" and corresponding value in resources.resw. After deleting x:Uid my layout returned to normal...
For my Windows 8.1 XAML app, I am trying to create a XAML layout that resembles the following description:
One StackPanel that contains two GridViews (let's say GV1, GV2)
Each GridView contains images that are displayed through data binding
GV1 and GV2 should be horizontally stacked when screen is in landscape mode. Their width should be equal. The scrolling of images should be vertical.
GV1 and GV2 should be vertically stacked when screen is in portrait mode. There height should be equal. The scrolling of images should be horizontal.
I have tried several approaches using various combinations of GridViews, StackPanels, ScrollViewer etc. but nothing seems to work.
My latest attempt at creating a basic horizontal layout is here:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel x:Name="theStackPanel" Orientation="Horizontal">
<GridView x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center">
<Image Source="{Binding Path=SrcImage}" HorizontalAlignment="Center" Width="300" Height="225"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<GridView x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center">
<Image Source="{Binding Path=SrcImage}" HorizontalAlignment="Center" Width="120" Height="90"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Grid>
Any pointers or some kind of pseudo XAML code would be really helpful.
I'd try this:
<Page
x:Class="App79.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App79"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!-- Two layouts to put in the page. Handle SizeChanged events to show the one that should be visible.
You could use VisualStateManager to switch between these if you want to keep designer support. -->
<ContentPresenter
x:Name="PortraitLayout"
Visibility="Collapsed">
<ContentPresenter.ContentTemplate>
<!-- Collapsed ContentPresenter in Windows 8.1 is roughly equivalent to x:Defer in Windows 10 -->
<DataTemplate>
<Grid>
<!-- Note that using a Grid here works better than a StackPanel since it will let you split the space into two rows/columns of same size -->
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<GridView
x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="300"
Height="225" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<GridView
Grid.Row="1"
x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="120"
Height="90" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
<ContentPresenter
x:Name="LandscapeLayout"
Visibility="Collapsed">
<ContentPresenter.ContentTemplate>
<!-- Collapsed ContentPresenter in Windows 8.1 is roughly equivalent to x:Defer in Windows 10 -->
<DataTemplate>
<Grid>
<!-- For landscape we-re using columns -->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- Note that for vertical scrolling we're using ListViews with custom ItemsPanels.
In Windows 10 this might be simpler with just reconfigured GridViews. -->
<ListView
x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="300"
Height="225" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView
Grid.Column="1"
x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="120"
Height="90" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Grid>
</Page>
I am building a Custom Control for Windows Phone 8.1. But the stackpanel is not scrolling down. StackPanel contains one ListView which shouws a TextBlock & another StackPanel which houses a Toggle Button.
<StackPanel Orientation="Vertical" >
<ListView Grid.Row="0" Background="RoyalBlue">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="Some Text" Foreground="Black" FontSize="20" TextAlignment="Center" ></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Row="2" HorizontalAlignment="Stretch" Background="Red" Orientation="Horizontal">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0" Content="Toggle Me" />
</Grid>
</StackPanel>
</StackPanel>
Stackpanel doesn't provide any scrolling.
You can wrap it into a ScrollViewer.
Also: listView already provides Scrolling.
But: The ListView inside stackpanel will pick up all your manipulation events. Also, a ListView inside a Stackpanel will have infinite heigt and therefore loose it's virtualization capabilities.
If you just want to have content above and/below the ListView, maybe use its Header/Footer properties.
Add ScrollViewer over the StackPanel and it will make it scrollable.
For Example:
<ScrollViewer Margin="12">
<StackPanel>
<TextBlock Text="content1" FontSize="48" />
<TextBlock Text="content1" FontSize="48" />
</StackPanel>
</ScrollViewer>
This is my xaml code,
<Grid x:Name="ContentPanel" Margin="12,164,12,-161" Grid.RowSpan="2"/>
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Height="1192" Margin="0,171,0,-595" Grid.RowSpan="2">
<Grid Width="478" Height="1197">
//content goes here
<Image x:Name="ImageBox" Visibility="Visible" HorizontalAlignment="Left" Width="468" Margin="0,630,0,193"/>
//content goes here
</Grid>
</ScrollViewer>
</Grid>
What the problem is that, i can't see the image,even after scrolling!
only a part of my image is visible, how can i rectify this issue??
Unless i have understood the question wrong, mostly the problem might be with the line,
<Grid x:Name="ContentPanel" Margin="12,164,12,-161" Grid.RowSpan="2"/>
Change Grid.RowSpan="1".
<Grid x:Name="ContentPanel" Margin="12" Grid.RowSpan="2" Height ="700"/>
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Height="1192" Margin="0" >
//content goes here
<Image x:Name="ImageBox" Visibility="Visible" HorizontalAlignment="Left" Width="468" Margin="0,20"/>
//content goes here
</ScrollViewer>
</Grid>
Please check the following items:
Since Windows phone design has maximum height 800 so your scrollveiwer height can be thus be maximum : 800-164 = 636
Remove negative margin of content panel
Remove negative margin of ScrollViewer otherwise your design would be cut from downside.
Your code should be like this :
<Grid x:Name="ContentPanel" Margin="12,164,12,0" Grid.RowSpan="2"/>
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Height="636" Margin="0,0,0,0" Grid.RowSpan="2">
<Grid Width="478" Height="1197">
//content goes here
<Image x:Name="ImageBox" Visibility="Visible" HorizontalAlignment="Left" Width="468" Margin="0,630,0,193"/>
//content goes here
</Grid>
</ScrollViewer>
</Grid>
If your problem still exist please update the question to include the xaml code.