I have page that is using the "Split Page" template and I want it to animate the details whenever a different item is selected in the ListView
My XAML
<!-- Vertical scrolling item list -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="0,0,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
<TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Details for selected item -->
<ScrollViewer
x:Name="itemDetail"
AutomationProperties.AutomationId="ItemDetailScrollViewer"
Grid.Column="1"
Padding="60,0,66,0"
DataContext="{Binding SelectedItem, ElementName=itemListView}"
HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.ZoomMode="Disabled" Grid.Row="1">
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<Grid.ChildrenTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}" Width="128" Height="128"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
</Grid>
</ScrollViewer>
From reading Quickstart: Animating your UI using library animations (Windows Runtime apps using C#/VB/C++ and XAML) I should be able to get my desired effect by adding
<Grid.ChildrenTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
Though it does not have the desired effect. Can qnyone tell me why and how to achieve the desired effect?
Changing it to this has the desired effect
<!-- Vertical scrolling item list -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="0,0,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
<TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Details for selected item -->
<ContentControl x:Name="itemDetail" Content="{Binding SelectedItem, ElementName=itemListView}" Grid.Row="1" Grid.Column="1" >
<ContentControl.ContentTemplate>
<DataTemplate>
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}" Width="128" Height="128"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
</Grid>
</DataTemplate>
</ContentControl.ContentTemplate>
<ContentControl.ContentTransitions>
<TransitionCollection>
<ContentThemeTransition HorizontalOffset="100"/>
</TransitionCollection>
</ContentControl.ContentTransitions>
</ContentControl>
Related
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 have a GridView that looks as follows:
<Page
x:Name="pageRoot"
x:Class="View.ServiceModule"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:View"
xmlns:common="using:View.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding ServiceTasksFiltered}"
IsSourceGrouped="true"
ItemsPath="ServiceTasksFiltered">
</CollectionViewSource>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridView
Visibility="Collapsed"
x:Name="serviceTasksFilteredGridView"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
ItemsSource="{Binding ServiceTasksFiltered, Mode=TwoWay}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="true"
ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
VerticalAlignment="Top">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="500"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Debitornr." TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="1" Text="Name" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Text="Belegnr." TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="3" Text="Reaktionsdatum" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="4" Text="Priorität" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
</Grid>
</GridView.Header>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="500"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding CustomerNo}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="1" Text="{Binding CustomerName}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="2" Text="{Binding DocumentNo}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="3" Text="{Binding ResponseDateDisplay}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="4" Text="{Binding PriorityDisplay}" TextWrapping="Wrap" FontSize="20"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0"
Click="BackButton"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="Serviceaufgaben" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
When I try to scroll down to display the bottom rows, the top rows are being moved higher instead of disappearing. Please see the following picture for a better descirption:
GridView with wrong scrolling settings
As you can see the GridView is scrolled down and the rows are behind the header of the page. I need them to disappear.
Any help would be greatly appreciated.
I have ItemDetailPage.xaml with FlipView, inside of DataTemplate i have Grid with come columns. One of columns contains StackPanel with some controls.
Example:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<Grid Margin="120,0,20,20" x:Name="richTextColumns">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" Margin="0,0,0,10" x:Name="ContentPanel">
<TextBlock FontSize="22" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap" />
<Image x:Name="image" Width="200" Margin="0,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<RichTextBlock x:Name="InformationOriginalName" Width="250"
Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
<Paragraph>
<Run FontWeight="SemiLight" Text="{Binding EvaInformation.OriginalName}"/>
</Paragraph>
</RichTextBlock>
</StackPanel>
</StackPanel>
....
</Grid>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
How to stretch ContentPanel to FullScreen and hide all different controls, including Back button and title of page?
I have this LongListSelector in my app page:
<Controls:LongListSelector x:Name="searchList" Margin="0,0,0,0" Background="White" SelectionChanged="DidPressSelectSearchList" HorizontalContentAlignment="Stretch" Grid.Row="1">
<Controls:LongListSelector.ItemTemplate>
<DataTemplate>
<local:SearchTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch">
<local:SearchTemplateSelector.GoogleSuggestTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3"/>
<TextBlock Text="{Binding}" FontSize="25" Foreground="Black" TextWrapping="Wrap" Grid.Row="1" Margin="0,10"/>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.GoogleSuggestTemplate>
<local:SearchTemplateSelector.VideoTemplate>
<DataTemplate>
<Grid>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Margin="0" Source="{Binding Path=ImgUrl}" HorizontalAlignment="Left" Width="100" Height="100" Tag="{Binding idStr}"/>
<Grid Grid.Column="1" Margin="10,0,8,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" FontSize="20" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<StackPanel Orientation="Horizontal" Margin="0,-5,0,0" Grid.Row="1">
<TextBlock Text="Views: " FontSize="20" Foreground="Black"/>
<TextBlock Text="{Binding ViewCount}" FontSize="20" Foreground="Black"/>
</StackPanel>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TimeStr}" FontSize="20" Foreground="Black" Margin="0,0,0,0" />
<TextBlock Text="Cached" FontSize="20" Foreground="Red" Margin="20,0,0,0" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.VideoTemplate>
</local:SearchTemplateSelector>
</DataTemplate>
</Controls:LongListSelector.ItemTemplate>
</Controls:LongListSelector>
And i noticed that when i press a item in the list so the user not have any thing to know which item he pressed, something like focus the item when he press it.
In iPhone the the selected row get blue and when release the blue selection is disappear,there is some equivalent to this in windows phone too?
Use TiltEffect from Silverlight Toolkit for Windows Phone, details are here http://www.geekchamp.com/articles/silverlight-for-wp7-toolkit-tilteffect-in-depth. Also to make an effect more expressive use Button as a container for your ItemTemplate with EmptyButtonStyle http://www.jeff.wilcox.name/2011/10/hyperlinkbutton-empty-style-for-phone/.
I've got 2 listbox and one scrollviewer and I want the scrollviewer to scroll the two listbox together. But i don't know how to do.. Here's my xaml :
<ScrollViewer Grid.Row="1">
<Grid>
<ListBox Name="listboxRSSFeedItems" Width="240" Height="644" Margin="0,0,240,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" Grid.Row="0" FontSize="24" HorizontalAlignment="Left" />
<HyperlinkButton Content="Link to details" NavigateUri="{Binding Link}" HorizontalAlignment="Left" Grid.Row="1" Margin="0,0,0,30" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Name="listboxRSSFeedItems2" Width="240" Height="644" Margin="240,0,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" Grid.Row="0" FontSize="24" HorizontalAlignment="Left" />
<HyperlinkButton Content="Link to details" NavigateUri="{Binding Link}" HorizontalAlignment="Left" Grid.Row="1" Margin="0,0,0,30" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ScrollViewer>
Thanks a lot
Ok. I just tried to do one listbox with grid. it works fine, but how to choose which grid to add my item.
I used to add with "listboxRSSFeedItems.Items.Add(item)", but now, how can i choose the 2nd Column only.
<ScrollViewer Grid.Row="1">
<ListBox x:Name="listboxRSSFeedItems" Width="480" Height="680">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="first" Grid.Column="0">
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
<HyperlinkButton NavigateUri="{Binding URL}" TargetName="_blank"/>
</Grid>
<Grid x:Name="second" Grid.Column="1">
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
<HyperlinkButton NavigateUri="{Binding URL}" TargetName="_blank" />
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
Thanks again
You shouldn't set height of your listBoxes.
ps: Consider layout using columns
<ScrollViewer >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox x:Name="first" Grid.Column="0" />
<ListBox x:Name="second" Grid.Column="1" />
</Grid>
</ScrollViewer>
Set VerticalScrollBarVisibility to "Disabled" for listBoxes.
And it will be better using StackPanel for this puprose instead of Grid.