I am trying to create listbox with images wrapped in a wrappanel. I want to show the items fit to screen. like if the items width is less than the available screen width then the items should be stretched and if the items width is greater than the available screen width then the items should jump to next row and empty space should be filled.
Code:
<ListBox x:Name="lst" Grid.Row="3" HorizontalAlignment="Left">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" ite ItemWidth="Auto" ItemHeight="Auto"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<Border BorderThickness="2" Width="Auto" Margin="5,5,5,5" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</ListBox>
Try adding the following container style to your ListBox:
<UserControl x:Class="MyClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Style x:Key="myContainerStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</UserControl.Resources>
<ListBox ItemContainerStyle="{StaticResource myContainerStyle}">
</ListBox>
</UserControl>
(Eventually you have to use PhoneApplicationPage instead of UserControl)
UPDATE: Removed HorizontalAlignment as proposed by Jared Bienz
Related
Below is my xaml code which defines ListView. The output is series of products. But the problem is the product aligns one after another.
I Want an output align vertically one after another.
<ListView x:Name="list" Margin="0,0,0,0" SelectionChanged="list_SelectionChanged" VerticalAlignment="Top">
<ListView.Resources>
<DataTemplate x:Key="myCell">
<Border BorderBrush="Gray" BorderThickness="0,0,0,0" >
<Grid Margin="0" x:Name="tryadpative" >
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Image x:Name="prodimg" Width="auto" Source="{Binding prodimg}" Grid.Row="0"></Image>
<TextBlock x:Name="productcode" TextWrapping="Wrap" Text="{Binding productcode}" HorizontalAlignment="Center" Width="auto" FontSize="12" Grid.Row="1" Foreground="Gray"/>
<TextBlock x:Name="productname" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="Gray" Grid.Row="0" Text="{Binding productname}" />
<TextBlock x:Name="productmindec" TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding productmindec}" Width="auto" FontSize="14" Grid.Row="2" Foreground="Gray"/>
<!--<Image x:Name="prodimg" Width="auto" Source="{Binding prodimg}" Grid.Row="0"></Image>
<TextBlock x:Name="productcode" TextWrapping="Wrap" Text="{Binding productcode}" Width="auto" FontSize="12" Foreground="Gray"/>
<TextBlock x:Name="productname" FontSize="14" Foreground="Gray" Text="{Binding productname}" />
<TextBlock x:Name="productmindec" TextWrapping="Wrap" Text="{Binding productmindec}" Width="auto" FontSize="14" Foreground="Gray"/>-->
</Grid>
</Border>
</DataTemplate>
</ListView.Resources>
<!--<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>-->
<ListView.ItemTemplate>
<StaticResource ResourceKey="myCell"/>
</ListView.ItemTemplate>
</ListView>
ItemsStackPanel can be used only as the ItemsPanel of an ItemsControl that displays more than one item at a time. It can't be used with an ItemsControl that displays only one item at a time, such as a ComboBox or FlipView. ItemsStackPanel is the default ItemsPanel for ListView.
By default, the ItemsStackPanel stacks items vertically from top to bottom. You can set the Orientation property to Horizontal to stack items from left to right.
For more info, see ItemsStackPanel.
We should be able to set the Horizontal to the Orientation of the ItemsStackPanel.
For example:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" >
</ItemsStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
By the way, if you want scroll the ListView in horizontal, you should be able to set the Visible to ScrollViewer.HorizontalScrollBarVisibility and Enabled to the ScrollViewer.HorizontalScrollMode in ListView.
For example:
<ListView x:Name="list"
Margin="0,0,0,0"
SelectionChanged="list_SelectionChanged"
VerticalAlignment="Top"
SelectionMode="Single"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled">
</ListView>
I am trying to build a 4 column list view to display some data in the Windows Universal App. I have the following Listview but the list view is not scrolling vertically in spite of data being there for scroll. I am not sure what I am doing wrong. Any pointers or help is appreciated..
XAML Code
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ChennaiTrains"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ChennaiTrains.ViewModel"
xmlns:Model="using:ChennaiTrains.Model"
x:Class="ChennaiTrains.MainPage"
xmlns:c="using:ChennaiTrains.Controls"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Icon="Find" Click="AppBarButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Page.Background>
<ImageBrush ImageSource="..\Assets\Images\marina.jpg" Stretch="UniformToFill"></ImageBrush>
</Page.Background>
<Grid>
<Grid x:Name="body">
<StackPanel>
<Grid x:Name="titlebar">
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="menu"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}"
FontSize="30"
FontFamily="Segoe MDL2 Assets"
Content="" Click="HamburgerButton_Click"
Background="Transparent" Height="42" Visibility="Visible"/>
<TextBlock x:Name="content"
FontSize="25"
Text="Chennai Compass" Height="42" Visibility="Visible"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}" Margin="0"/>
</StackPanel>
</Grid>
<SplitView x:Name="MySplitView"
DisplayMode="Inline"
OpenPaneLength="150"
CompactPaneLength="50"
IsPaneOpen="False" Background="Transparent" BorderBrush="Black">
<SplitView.Pane>
<StackPanel Background="Transparent">
<!-- <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" /> -->
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<Grid>
<AutoSuggestBox AllowDrop="True" x:Name="fromTextBox"
PlaceholderText="Enter the starting point"
QueryIcon="Find" TextChanged="DestinationBox_TextChanged"
SuggestionChosen="AutoSuggestBox_SuggestionChosen"
QuerySubmitted="AutoSuggestBox_QuerySubmitted"
TextMemberPath="StationName"
>
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<AutoSuggestBox x:Name="DestinationBox"
QueryIcon="Find"
DisplayMemberPath="{Binding StationList.StationName}"
TextMemberPath="StationName"
TextChanged="DestinationBox_TextChanged"
SuggestionChosen="DestinationBox_SuggestionChosen"
PlaceholderText="Enter the destination" Margin="0,60,0,0">
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<Grid x:Name="resultGrid" Margin="0,140,2,0">
<ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="15"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<DataTemplate x:Key="TimeTemplate">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="0">
<TextBlock Text="Start at:" Margin="0,0,5,0"></TextBlock>
<TextBlock x:Name="startAt" Text="{Binding Time}" />
<TextBlock FontFamily="Segoe MDL2 Assets" Margin="20,0,5,0" Text="">
</TextBlock>
<TextBlock x:Name="duration" Text="{Binding Duration}"/>
<TextBlock Text="Reach by:" Margin="-212,35,0,0"></TextBlock>
<TextBlock x:Name="EndPoint" Margin="-145,35,0,0" Text="{Binding DestinationTime}" />
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Margin="-75,35,0,0"></TextBlock>
<TextBlock x:Name="trainType" Margin="-55,35,0,0" Text="{Binding TrainType}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="headerText" Text="Next available Trains"/>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<StaticResource ResourceKey="TimeTemplate"/>
</ListView.ItemTemplate>
<ListView.DataContext>
<Model:ResultListModel/>
</ListView.DataContext>
</ListView>
</Grid>
</Grid>
</SplitView>
</StackPanel>
</Grid>
</Grid>
</Page>
Your problem is the StackPanel that contains the titlebar and SplitView. Content inside of a StackPanel is not confined to any space and it will stretch on forever. In your case this means the SplitView and therefore the ListView inside it are stretching forever. Without being confined the ListView doesn't believe it needs to scroll.
The fix is to use a Grid with Rows instead. I would add Grid RowDefinitions into your body Grid with the titlebar in row 0 and the SplitView in row 1 and remove the StackPanel just inside the body Grid. That will get your scrolling working. Paraphrasing your code, the row definitions would look like this
<Grid x:Name="body">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="titlebar" Grid.Row="0">
</Grid>
<SplitView x:Name="MySplitView" Grid.Row="1">
</SplitView>
</Grid>
Hi Everyone this is my first question so, I'll try to be really explicit:
I have a ListBox with a Style and Template to make it a two column style view.
This is the Template for the ListBoxItem:
<DataTemplate x:Key="ItemDataTemplate">
<Grid Height="29">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" />
<ColumnDefinition Width=".7*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Name="txtBind1" Text="{Binding Codigo}"/>
<TextBlock Grid.Column="1" Name="txtBind2" Text="{Binding Descripcion}"/>
</Grid>
</DataTemplate>
<Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyle" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ScrollViewer>
<StackPanel VerticalAlignment="Top">
<Grid Height="30" Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.30*"/>
<ColumnDefinition Width="0.70*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="1">
<TextBlock Grid.Column="0" Text="{Binding CriterioActual.Descripcion}"/>
</Border>
<Border Grid.Column="1" BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="1">
<TextBlock Grid.Column="1" Text="Descripción"/>
</Border>
</Grid>
<ItemsPresenter/>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And this is the ListBox:
<ListBox Height="320" Margin="0,84,0,0" Name="ListaArticulos" VerticalAlignment="Top"
Style="{StaticResource ListBoxStyle}"
ItemTemplate="{StaticResource ItemDataTemplate}"
ItemContainerStyle="{StaticResource ListboxStretchStyle}"
ItemsSource="{Binding Articulos}">
</ListBox>
This is the Result:
At this point, everything is fine, so I implemented a TemplateSelector to change the template of the ListBoxItem depending of SelectedItem of a ListBox. So I put the same template into a TemplateSelector but the Grid's Width is not Stretching.
Template Selector:
<DataTemplate x:Key="MultiTemplate">
<Views:ArticulosTemplateSelector Content="{Binding}" Filtro="{Binding ElementName=ComboCriterios, Path=SelectedItem, Mode=OneWay}">
<Views:ArticulosTemplateSelector.FiltroCodigo>
<DataTemplate>
<Grid Height="29" Background="Gray" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" />
<ColumnDefinition Width=".7*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Name="txtBind1" HorizontalAlignment="Stretch" Text="{Binding Codigo}"/>
<TextBlock Grid.Column="1" Name="txtBind2" HorizontalAlignment="Stretch" Text="{Binding Descripcion}"/>
</Grid>
</DataTemplate>
</Views:ArticulosTemplateSelector.FiltroCodigo>
</DataTemplate>
This is the Updated ListBox:
<ListBox Height="320" Margin="0,84,0,0" Name="ListaArticulos" VerticalAlignment="Top"
Style="{StaticResource ListBoxStyle}"
ItemTemplate="{StaticResource MultiTemplate}"
ItemContainerStyle="{StaticResource ListboxStretchStyle}"
ItemsSource="{Binding Articulos}">
</ListBox>
The Final Result:
The Grid is not stretching, If anyone can please help me I'll apreciate.
The Template Selector has its own Width, so is important to stretch the Selector to allow the Grids to expand its size:
<Views:ArticulosTemplateSelector HorizontalContentAlignment="Stretch" Content="{Binding}" Filtro="{Binding ElementName=ComboCriterios, Path=SelectedItem, Mode=OneWay}">
Note the principal change:
HorizontalContentAlignment="Stretch"
Regards
I got problems with setting Listbox TemplateSelector to span 100%. My solution to this, was to replace Listbox with LongListSelector.
I'm coding a simple windows phone 7.5 localization application.
I've changed the default pushpin template as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="allPushpinsTemplate">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
When I click on a pushpin, I handle the event and change the template of the selected pin as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="detailedPushpinTemplate">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<TextBlock Text="{Binding Adress}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ZipCode}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding City}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding TelStd}" Foreground="White" />
<TextBlock Text="{Binding Email}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="email" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-mail.png" Width="40" Height="40" />
</Button.Content>
</Button>
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="phone" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-phone.png" Width="40" Height="40" />
</Button.Content>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
So that I can display some info and some commands. The result works perfectly and display a black rectangle with all my custom data.
But, the other pins (default template) overlap the rectangle and appears on the top of my selected pin and hide information.
Has anyone an idea to force the selected pin template to be always on top of the other pins ?
for information the XAML of my map :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Canvas >
<maps:Map ZoomBarVisibility="Visible" ZoomLevel="4" Center="46.8821,2.2697" Name="map1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Canvas.Top="0" Height="600" Width="460">
<maps:MapItemsControl x:Name="mapControl"/>
<maps:MapItemsControl ItemsSource="{Binding Locations}" >
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Location="{Binding Location}" Template="{StaticResource allPushpinsTemplate}" MouseLeftButtonDown="Pushpin_MouseLeftButtonDown"/>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
<maps:MapLayer Name="imageLayer"/>
</maps:Map>
<Button Content="some action" Height="70" HorizontalAlignment="Left" Margin="0" Name="button1" VerticalAlignment="Top" Width="170" Canvas.Left="140" />
</Canvas>
</Grid>
The only way I've been able to work around this default behaviour is to remove the original pin and then add a new one in the same position with the different template.
The newly added pin appears at the top in the Z-Order but I haven't been able to alter the Z-Order of existing pins once created.
Also remember to "reset" any pins in the selected state when the user clicks on another.
I guess this should help you: http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/c4055dba-3efd-4bf7-98b3-cd8e24d175ea
I have created a page where there's alot of input from the user. So the User should be able to scroll down to be able to press a Upload button. To scroll down on the page I have used a ScrollViewer outside a grid. I am able to scroll but the page keeps scrolling back after scrolling down.
Here is my code:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer >
<Grid x:Name="ContentPanel" Background="black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="154" />
<ColumnDefinition Width="326" />
</Grid.ColumnDefinitions>
<Image Height="109" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="167" Margin="23,19,0,0" Source="{Binding Path=ImageSoruce, Mode=TwoWay}" Grid.ColumnSpan="2" />
<TextBox Height="71" HorizontalAlignment="Left" Margin="12,161,0,0" Name="nameInput" Text="{Binding Path=Name, Mode=TwoWay}" VerticalAlignment="Top" Width="430" Grid.ColumnSpan="2" />
<TextBlock Height="56" HorizontalAlignment="Left" Margin="23,134,0,0" Name="nameLabel" Text="Name" VerticalAlignment="Top" Width="130" FontSize="25" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,238,0,0" Name="descriptionLabel" Text="Description" VerticalAlignment="Top" Width="130" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,265,0,0" Name="descriptionInput" Text="{Binding Path=Description, Mode=TwoWay}" VerticalAlignment="Top" Width="430" IsEnabled="True" Grid.ColumnSpan="2" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,343,0,0" Name="locationLabel" Text="Location" VerticalAlignment="Top" Width="130" />
<TextBlock Height="46" HorizontalAlignment="Left" Margin="24,384,0,0" Name="locationInput" Text="{Binding Path=Location, Mode=TwoWay}" VerticalAlignment="Top" Width="401" Loaded="locationInput_Loaded" Grid.ColumnSpan="2" />
<toolkit:ListPicker SelectionMode="Multiple" FullModeHeader="CATEFORIES" x:Name="ListPickerCategories" CacheMode="BitmapCache" HorizontalAlignment="Left" Margin="25,492,0,0" VerticalAlignment="Top" Width="401" Grid.ColumnSpan="2" ItemsSource="{Binding Categories}" Height="78"></toolkit:ListPicker>
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="24,436,0,0" Name="textBlock1" Text="Categories" VerticalAlignment="Top" Width="130" />
<Button Content="Upload" Height="86" HorizontalAlignment="Left" Margin="26,604,0,0" Name="UploadButton" VerticalAlignment="Top" Width="411" Click="UploadButton_Click" Grid.ColumnSpan="2" />
</Grid>
</ScrollViewer>
</Grid>
What can be the cause of this problem and how do I solve it?
Use StackPanels to put elements one below the other. Remove all your margins, height, width and other absolute positioning stuff
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer>
<StackPanel>
<!-- elements here -->
</StackPanel>
</ScrollViewer>
</Grid>
I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.