Hi James,
I checked it again, and what's happening is when I change the visual state e.g. let's say from FullScreenLandscape to Filled view the Media Element of FullScreenLandscape keeps on playing and the Media Element of FilledView also starts playing from the beginning, in other words there are two Media Element Controls that are playing but I only want one.
Here is the code to my XAML
<Grid x:Name="FullView"
Visibility="Visible"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding Item}"
d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=../App1.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--
TODO: Content should be placed within the following grid
to show details for the current item
-->
<Grid Grid.Row="1" x:Name="contentRegion">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="1"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Grid.RowSpan="2"
Padding="0,30"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate ScrollViewer.HorizontalScrollBarVisibility="Auto">
<Grid Height="110" Width="auto" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" TextWrapping="WrapWholeWords" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<StackPanel Width="auto" Height="auto"
Margin="100"
Grid.Column="0">
<MediaElement x:Name="VideoPlayer"
Height="425"
Width="700"
AreTransportControlsEnabled="True"
AutoPlay="False"
Source="{Binding Content}"
DoubleTapped="VideoPlayer_DoubleTapped"
/>
</StackPanel>
</Grid>
</Grid>
<Grid x:Name="FilledView"
Visibility="Collapsed"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding Item}"
d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=../App1.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--
TODO: Content should be placed within the following grid
to show details for the current item
-->
<Grid Grid.Row="1" x:Name="contentRegion_FilledView">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<ListView Grid.Row="1" HorizontalAlignment="Center"
x:Name="itemGridView_FilledView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Padding="0,30"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid HorizontalAlignment="Center" Height="110" Width="auto" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="auto" Height="auto">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Grid Grid.Row="0" Width="auto" Height="auto" >
<MediaElement x:Name="VideoPlayer_FilledView"
Height="400"
Width="660"
AreTransportControlsEnabled="True"
AutoPlay="False"
Source="{Binding Content}"
DoubleTapped="VideoPlayer_DoubleTapped"
/>
</Grid>
</Grid>
</Grid>
Here is the code of Visual States
<VisualState x:Name="FullScreenLandScape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FullView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FilledView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NarrowView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortraitView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Filled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FullView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FilledView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NarrowView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PortraitView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Here is the code of .CS
public ItemPage()
{
this.Loaded += ItemPage_Loaded;
this.Unloaded += ItemPage_Unloaded;
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += this.NavigationHelper_LoadState;
}
void ItemPage_Unloaded(object sender, RoutedEventArgs e)
{
Window.Current.SizeChanged -= Current_SizeChanged;
}
void ItemPage_Loaded(object sender, RoutedEventArgs e)
{
Window.Current.SizeChanged += Current_SizeChanged;
DeterminateVisualState();
}
void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
DeterminateVisualState();
}
private void DeterminateVisualState()
{
var state = string.Empty;
var applicationView = ApplicationView.GetForCurrentView();
var size = Window.Current.Bounds;
if (applicationView.IsFullScreen)
{
if (applicationView.Orientation == ApplicationViewOrientation.Landscape)
{
state = "FullScreenLandScape";
}
else
state = "FullScreenPortrait";
}
else
{
if (size.Width <= 500)
{
state = "Narrow";
}
else
state = "Filled";
}
VisualStateManager.GoToState(this, state, true);
}
private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
var item = await SampleDataSource.GetItemAsync((string)e.NavigationParameter);
this.DefaultViewModel["Item"] = item;
var group = await SampleDataSource.GetGroupAsync("Group-1");
this.DefaultViewModel["Group"] = group;
this.DefaultViewModel["Items"] = group.Items;
}
I hope this will help to understand my problem.samEE
No comments:
Post a Comment