I'm trying to bind my icon to a property in my appshell viewmodel. This works for the first time, and I am watching the "flyoutispresented" property change to update the icon - I'm switching between two different png's. The event fires every time, and I can see the property in the viewmodel is updating, but the flyout image is not changing. It seems to stay the way it was when first rendered. In my appshell constructor, I am doing the following:
model = new AppShellViewModel();
this.BindingContext = model;
this.PropertyChanged +=
(obj, args) => model.Shell_PropertyChanged(obj, args);
so I am using the single instance of the view model, and that method is being called properly. Has anyone had luck displaying different icons like this? What am I missing that even though I'm changing the icon property, it's not showing the change?
We could modefy the icon source via VisualStateManager status selected and normal.
<Shell.ItemTemplate>
<DataTemplate >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemIcon" Property="Image.Source" Value="icon_about.png"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter TargetName="FlyoutItemIcon" Property="Image.Source" Value="cactus_24px.png"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Image x:Name="FlyoutItemIcon" Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="45" >
</Image>
<Label Grid.Column="1"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
Update:
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="About" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
Related
In my UWP project, i have a page containing a grid with 4 columns that is resonably wide.
When the screen gets smaller (less wide), the columns get cut off (unreachable as they are out of view)
Is there a possible way to make the columns wrap (preferably the third and fourth column at the same time) to have the third and fourth columns beneath the first and second?
I'd like a hardcoded values-less approach the best.
Note: i do not have to keep using the Grid, if there is an obviously better approach to this with i.e. a RelativeView i'd be in for that as well
I think you may use the AdaptiveTrigger to change it when the width be changed.
And change the Grid to WrapGrid or do some thing to make Grid show best.
To know when should use the narrow UI , you should add some code just like this:
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="The min size" />
</VisualState.StateTriggers>
When the windows size more that the min size , it will run the VisualState.
The code is below:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="narrowView">
<VisualState.Setters>
<Setter Target="Grid1.(Grid.RowSpan)" Value="1"></Setter>
<Setter Target="Grid1.(Grid.ColumnSpan)" Value="2"></Setter>
<Setter Target="Grid2.(Grid.RowSpan)" Value="1"></Setter>
<Setter Target="Grid2.(Grid.Row)" Value="1"></Setter>
<Setter Target="Grid2.(Grid.ColumnSpan)" Value="2"></Setter>
<Setter Target="Grid2.(Grid.Column)" Value="0"></Setter>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="177*"/>
<RowDefinition Height="143*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="Grid1" Margin="10,10,10,10" Background="Black" Grid.RowSpan="2" ></Grid>
<Grid x:Name="Grid2" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Margin="10,10,10,10" Background="Black" ></Grid>
</Grid>
Another way is use SizeChange that you should give the Grid a name and I want name the Grid to Grid.
<Grid >
<Grid x:Name="Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Margin="10,10,10,10" Width="100" Height="100" Background="Black" Grid.RowSpan="2" ></Grid>
<Grid Grid.Column="1" Grid.Row="0" Margin="10,10,10,10" Width="100" Height="100" Background="Black" ></Grid>
</Grid>
<GridView x:Name="GridView" Visibility="Collapsed">
</GridView>
</Grid>
And I add SizeChange in Initialize.
public MainPage()
{
this.InitializeComponent();
SizeChanged += MainPage_SizeChanged;
}
And I will add a property which set the min width.
When the windows in the min width that can change the Grid1 and Grid2's Grid.Row property.
private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Width < MinWidht)
{
if (_grid)
{
_grid = false;
Grid.Visibility = Visibility.Collapsed;
var children = Grid.Children.ToList();
Grid.Children.Clear();
GridView.ItemsSource = children.ToList();
GridView.Visibility = Visibility.Visible;
Grid.Children.Clear();
}
}
else
{
if (!_grid)
{
// change to GridView to Grid
}
}
}
private const double MinWidht = 700;
private bool _grid = true;
See: http://www.c-sharpcorner.com/article/adaptive-grid-view-control-in-uwp-with-xaml-and-c-sharp/
Im working on building different layouts for my app. If the app runs in landscape I want to be able to show a map on one side on the screen, but not show a map if in portrait. I'm using VisualStateManager to help me do this.
I need to run some code in c# on the map control I have named "MyMap" but how can I make that bit of the code run only when the map is present - in other words is there a way I can check if it exists in the XAML?
Without the map any code referring to MyMap of course throws an error - is this the best way of going about this or am I missing a better way?
EDIT
I'm using an approach similar to the below to work out what template should be used depending on the MinWindowWidth. So MyMap will only exist in the LargeTemplate etc
<Page.Resources>
<DataTemplate x:Key="SmallTemplate">
<Grid>
<Border Background="LightGray" Height="100" Width="100">
<TextBlock Text="{Binding Text}"
FontSize="48" Foreground="Green" />
</Border>
</Grid>
</DataTemplate>
<DataTemplate x:Key="LargeTemplate">
<Grid>
<Border Background="LightGray" Height="200" Width="200">
<TextBlock Text="{Binding Text}"
FontSize="48" Foreground="Green" />
</Border>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Small">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MyGridView.ItemTemplate" Value="{StaticResource SmallTemplate}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Large">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MyGridView.ItemTemplate" Value="{StaticResource LargeTemplate}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<GridView Name="MyGridView"/>
</Grid>
Add an x:Name to your VisualStateGroup eg. AdaptiveVisualStateGroup, after that you can check for the CurrentState in your code like this:
AdaptiveVisualStateGroup.CurrentState
If the CurrentState equals Large or whatever the name is your VisualState where you have your map, you can run the code that references MyMap, otherwise you just skip it
I'm trying to stretch an image inside a Button which is inside a stackpanel and a grid but it doesn't works. On mobile size it works very well but when the app is for an Desktop it doesn't work anymore, we can see that the image overflows.
And what it looks like on desktop
My code:
<StackPanel x:Name="g5" Grid.Column="1" Grid.Row="1" Padding="20" Orientation="Vertical" >
<TextBlock Text="Site" FontSize="20"/>
<Button x:Name="websiteButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Background="#fc0">
<Image x:Name="websiteImage" Source="Assets/website.png" NineGrid="0" Margin="20,20,20,20"/>
</Button>
</StackPanel>
Someone can tell me what is wrong and how i can stretch the image inside the button ? Btw it's a .png file.
Thanks everyone !!
Stack Panel with Vertical orientation does not impose any limits on the Children in terms of their height. It just ensures that they are stacked one on top of another. This means, that on Desktop the Button gets large width and therefore the image grows vertically to. One way to prevent this is to set MaxHeight of the Button or of the Image inside of it.
A better solution would be to use a Grid:
<Grid x:Name="g5" Height="200" HorizontalAlignment="Stretch" Padding="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Site" FontSize="20"/>
<Button Grid.Row="1" x:Name="websiteButton" HorizontalAlignment="Stretch" Margin="0" Background="#fc0">
<Image x:Name="websiteImage" Source="/Assets/Square150x150Logo.png" NineGrid="0" Margin="20,20,20,20"/>
</Button>
</Grid>
The second row of the Grid has "*" height, which means that it will grow to fill available space. This will limit the height of the button. The default Stretch value of the image is Uniform, which will ensure the image will look good inside the button.
#Romasz and #MZetko are right. But for layout targeting different device platform, my suggestion is that you can also use VisualStateManager to set the Width and Height properties for different app window's size for example like this:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
<!--for desktop-->
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="websiteButton.Width" Value="300" />
<Setter Target="websiteButton.Height" Value="300" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
<!--for mobile-->
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="websiteButton.Width" Value="150" />
<Setter Target="websiteButton.Height" Value="150" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
In my Universal Windows 10 app, I have an animation that shrinks a custom control whose looks is applied via a template. It works as expected the first time it is run. The second time it is run, the start of the animation is rendered in a horrible resolution, apparently tainted by the previous run:
First time is on the left; second time on the right.
If, instead of using a custom control with a template, I hardcode everything in XAML, the problem doesn't occur.
If I grow rather than shrink the target, the problem doesn't occur.
Let me start with the non-templated version, which is shorter and easier to read than the templated version:
<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AnimationStates">
<VisualState x:Name="Show">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="transform"
Storyboard.TargetProperty="ScaleX"
To="0.1"
BeginTime="0:00:2"
Duration="0:00:1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="transform"
Storyboard.TargetProperty="ScaleY"
To="0.1"
BeginTime="0:00:2"
Duration="0:00:1">
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Hide" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="16"
FontSize="122"
Text="Q">
<TextBlock.RenderTransform>
<ScaleTransform x:Name="transform" />
</TextBlock.RenderTransform>
</TextBlock>
<Button
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="16"
Content="Animate!"
Click="OnAnimateClicked" />
</Grid>
</Page>
The code-behind is as follows:
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
}
private void OnAnimateClicked(object sender, RoutedEventArgs e)
{
VisualStateManager.GoToState(this, "Hide", useTransitions: false);
VisualStateManager.GoToState(this, "Show", useTransitions: true);
}
}
This works fine every time. But. Instead of applying the ScaleTransform to the TextBlock's RenderTransform directly, I have a custom control with a template applied. For illustration purposes we can use a custom control that is little more than a placeholder:
public sealed class CustomControl : Control
{
}
Then change the XAML to replace the TextBlock with a CustomControl, applying a template to the CustomControl:
<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp">
<Grid>
<Grid.Resources>
<Style TargetType="local:CustomControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl">
<Grid>
<TextBlock Text="Q" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AnimationStates">
<VisualState x:Name="Show">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="transform"
Storyboard.TargetProperty="ScaleX"
To="0.1"
BeginTime="0:00:2"
Duration="0:00:1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="transform"
Storyboard.TargetProperty="ScaleY"
To="0.1"
BeginTime="0:00:2"
Duration="0:00:1">
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Hide" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<local:CustomControl
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="16"
FontSize="122">
<local:CustomControl.RenderTransform>
<ScaleTransform x:Name="transform" />
</local:CustomControl.RenderTransform>
</local:CustomControl>
<Button
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="16"
Content="Animate!"
Click="OnAnimateClicked"/>
</Grid>
</Page>
The first time I click the Animate button, this works exactly like the first version. The second and subsequent times, the initial animation rendering uses the really coarse resolution shown on the right:
The coarseness seems to be proportional to the shrinkage factor. Is this a bug of some sort (a failed optimization?), or is my understanding of templates flawed?
I am enjoying the N+1DaysOfMVVMCross but I am stuck on Day 5 (Sort of a day 2 and day 5 combo)...
I used day 2 to develop a grid view UI and wanted to use the day 5 info to add a Command that will open a secondary view when an item is selected from the grid. The Command code in the ViewModel is never executed (though it does execute from a button).
I think the issue is more related to WPF/XAML but thought I would reference MVVMCross as this is where I hit the road block.
Thanks for any help/tips/direction
How about some source code...
From the view model, sorry for the list initialization I'm slowly working through this.
using Cirrious.MvvmCross.ViewModels;
using System.Collections.Generic;
using TeleBacteriology.Core.Services;
namespace TeleBacteriology.Core.ViewModels
{
public class WorklistViewModel : MvxViewModel
{
public WorklistViewModel(IWorklistItemService service)
{
var newList = new List<WorklistItem>();
WorklistItem newWorklistItem = service.CreateNewWorklistItem("201401250001", "http://placekitten.com/301/301");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250002", "http://placekitten.com/302/302");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250003", "http://placekitten.com/303/303");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250004", "http://placekitten.com/304/304");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250005", "http://placekitten.com/305/305");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250006", "http://placekitten.com/306/306");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250007", "http://placekitten.com/307/307");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250008", "http://placekitten.com/308/308");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250009", "http://placekitten.com/309/309");
newList.Add(newWorklistItem);
newWorklistItem = service.CreateNewWorklistItem("201401250010", "http://placekitten.com/310/310");
newList.Add(newWorklistItem);
Worklist = newList;
}
private List<WorklistItem> _worklist;
public List<WorklistItem> Worklist
{
get { return _worklist; }
set { _worklist = value; RaisePropertyChanged(() => Worklist); }
}
private MvxCommand _detailsCommand;
public System.Windows.Input.ICommand DetailsCommand
{
get
{
_detailsCommand = _detailsCommand ?? new MvxCommand(DoDetailsCommand);
return _detailsCommand;
}
}
private void DoDetailsCommand()
{
ShowViewModel<PlateDetailsViewModel>();
}
}
}
The XAML for the view:
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="TeleBacteriology.Store.Views.WorklistView"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TeleBacteriology.Store.Views"
xmlns:common="using:TeleBacteriology.Store.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!-- Collection of items displayed by this page -->
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding Worklist}"/>
<DataTemplate x:Key="Worklist250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding ImageUrl}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding AccessionNum}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding ImageUrl}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="Worklist80ItemTemplate">
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
<Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding AccessionNum}" Style="{StaticResource ItemTextStyle}" MaxHeight="40"/>
<TextBlock Text="{Binding ImageUrl}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">My Application</x:String>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid used in most view states -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
ItemTemplate="{StaticResource Worklist250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
SelectedItem="{Binding DetailsCommand}"/>
<!-- Vertical scrolling list only used when snapped -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Visibility="Collapsed"
Margin="0,-10,0,0"
Padding="10,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectedItem="{Binding DetailsCommand}"
ItemTemplate="{StaticResource Worklist80ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"/>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<Grid Grid.Row="2">
<Button Content="Go Details" Command="{Binding DetailsCommand}" />
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
<DiscreteObjectKeyFrame KeyTime="0" Value="96,136,86,56"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!--
The back button and title have different styles when snapped, and the list representation is substituted
for the grid displayed in all other view states
-->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</common:LayoutAwarePage>
I can post for the second view but I don't think that's necessary. Again, if I place a button in the view and set the Command binding to DetailsCommand, the second view pops up just fine. Can't get it to work with item selection on the grid.
From looking at your code, it seems you misunderstood the SelectedItem property of the ListView. It will be populated with one of your WorkListItem objects when the selection changes.
The ListView does not have a command property like the Button does, so you need to handle the SelectionChanged event of the ListView and invoke the Command on your Viewmodel manually.
You can do this in code-behind or take a look at one of the EventToCommand helpers to do it directly in xaml.