I am using a GridView ( and I even tried ListView for this purpose ) as a context indicator of my FlipView. The Problem is that when I try to tap/click on a gridViewItem in order for it to get selected and hence changing the flipviewItem index as well, the gridview is not recieving any tap or click interaction by the user to change it. However when I change flipviewItem from directly flipview, it works as expected and gridview item selected is also changed accordingly.
CODE
<Grid>
<FlipView x:Name="MainFlipView" ItemsSource="{x:Bind MyItemsSource}" Visibility="Visible"
SelectionChanged="FlipChanged">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="data:Video">
<userControls:FlipDataTemplate />
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<GridView SelectionChanged="ContextChanged"
Name="ContextIndicator"
HorizontalAlignment="Right" VerticalAlignment="Bottom"
Margin="0,0,12,12"
ItemsSource="{x:Bind MyItemsSource}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Video">
<Image Width="40" Height="40" Source="{x:Bind Display}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
C#
private void FlipChanged(object sender, SelectionChangedEventArgs e)
{
ContextIndicator.SelectedIndex = MainFlipView.SelectedIndex;
}
private void ContextChanged(object sender, SelectionChangedEventArgs e)
{
MainFlipView.SelectedIndex = ContextIndicator.SelectedIndex;
}
You need to set IsItemClickEnabled to True on your GridView.
I was able to solve it with help of #JustinXL and I put FlipView and GridView in Rows and made RowSpan of FlipView to 2 so I got same UI as I wanted but now it works as expected, apparently if they are in same row then FlipView interferes with UI interaction on GridView.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<FlipView x:Name="MainFlipView" ItemsSource="{x:Bind MyItemsSource}" Visibility="Visible" Grid.RowSpan="2"
SelectionChanged="FlipChanged">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="data:Video">
<userControls:FlipDataTemplate />
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<GridView SelectionChanged="ContextChanged" Grid.Row="1"
Name="ContextIndicator"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="0,0,12,8"
Canvas.ZIndex="1"
ItemsSource="{x:Bind MyItemsSource}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Video">
<Image Width="40" Height="40" Source="{x:Bind Display}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
Related
I work on an app where the user can edit a "big" form:
The form contains a lot of fields: it is displayed in a Pivot, where each PivotItem represents a category of the form.
Some categories contain one or more child items: they are displayed through a Master-Detail presentation.
To display the items of the Detail part, I use a ContentPresenter that is binded directly to the Model:
<ContentPresenter
x:Name="DetailContentPresenter"
Grid.Column="1"
Grid.RowSpan="2"
BorderThickness="1,0,0,0"
Padding="24,0"
BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}"
Content="{x:Bind MasterListView.SelectedItem, Mode=OneWay}">
<ContentPresenter.ContentTemplate>
<DataTemplate x:DataType="models:Form_Parts">
<...>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
This works fine, but there is a "third" level in the main form: a list of photos, that I display in the ContentPresenter through a GridView. This works also great, but I would like to use an "Add" button or the "ItemClick" event to interact with the photos: I don't see how I could bind a Command in the main ViewModel, instead of the ContentPresenter's DataContext. The other fields of this form bind well on this ViewModel.
I did some tests without any result:
<StackPanel Orientation="Horizontal" Grid.Row="1">
<GridView ItemsSource="{Binding images}"
ItemClick="{Binding PhotoClickCommand}">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1"
Padding="10"
Height="150" Width="190">
<Image Stretch="UniformToFill"
Source="{Binding bitmap_image}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<Border BorderBrush="Gray" BorderThickness="1"
Padding="10"
Height="150" Width="190">
<Button Command="{Binding Path=DataContext.AddPhotoCommand, ElementName=DetailsPage}"
Height="100" Width="100">
<Viewbox>
<SymbolIcon Symbol="Add"/>
</Viewbox>
</Button>
</Border>
</StackPanel>
=> is there a way to doing this?
Edit :
I solved my problem for the "Add" button thanks Alteik with:
<Button Command="{Binding ElementName=Root, Path=DataContext.AddPhotoCommand}" Height="100" Width="100">
But I always get a problem with the ItemClick of the GridView. I tried this:
<GridView ItemsSource="{Binding images}"
IsItemClickEnabled="True"
SelectionMode="None">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding ElementName=Root, Path=DataContext.EditPhotoCommand}"
CommandParameter="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
<...>
</GridView>
But I don't get the expected parameter in the ViewModel:
private void EditPhoto(object sender)
{
Images sImage = (Images)sender;
if (sImage != null)
{
NavigationService.NavigateTo<CommentImageViewModel>(this, new Object[] { sImage }, true);
}
}
The sender is the current Form_Parts (the DataTemplate of the ContentPresenter), whereas I would get the selected item of my images collection, that is binded to the GridView...
=> Whad could I do to fix this?
You should be able to change the DataContext in a child element doing this:
Command"{Binding ElementName=Root, Path=DataContext.TheCommandFromRoot}"
Obviously you need to set the name of the parent's element to "Root"
In my UWP app which uses MVVMLight, I have a button contained in my ListViewItem and when clicked I want to display a flyout and provide additional actions for the specific ListViewItem but whenever I tap on the button, I get an error i.e.
System.InvalidCastException: Unable to cast object of
type 'Windows.UI.Xaml.Input.TappedRoutedEventArgs' to
type 'MyApp.ViewModels.ItemViewModel'.
at GalaSoft.MvvmLight.Command.RelayCommand`1.Execute(Object parameter)
at Microsoft.Xaml.Interactions.Core.InvokeCommandAction.Execute(Object
sender, Object parameter) at
Microsoft.Xaml.Interactivity.Interaction.ExecuteActions(Object sender,
ActionCollection actions, Object parameter)
at Microsoft.Xaml.Interactions.Core.EventTr
I understand to some extend why it's happening but how I can I fix this? The button contained in my ListViewItem data template is obviously being passed to the parent which is the listview and the DataTrigger that's defined in the Listview is capturing it.
All I want to do is display a flyout when this button is clicked to provide additional options.
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="{StaticResource SystemControlBackgroundAccentBrush5}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="4"
Width="90"
Height="90"
VerticalAlignment="Center"
Margin="5,5,0,5">
<Image Width="90"
Height="90"
Source="{Binding Logo}" />
</Border>
<Grid Grid.Row="0" Grid.Column="1" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal"
Grid.Row="1" VerticalAlignment="Bottom">
<TextBlock Text="Id:" FontWeight="SemiBold" Foreground="White" VerticalAlignment="Center"/>
<TextBlock Text="{Binding Subject}" Margin="10,0,0,0" Foreground="White" VerticalAlignment="Center"/>
</StackPanel>
<Button Width="30" Height="30"
Command="{Binding AdditionalInfoCommand}"
Grid.RowSpan="4"
Grid.Column="1"
Margin="0,0,12,0">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="{ThemeResource SystemControlBackgroundAccentBrush}"
Fill="{ThemeResource SystemControlBackgroundAccentBrush}"
StrokeThickness="2">
</Ellipse>
<Image Source="ms-appx:///Assets/Information.png" Width="30" Height="30" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
and my ListView has the following code:
<ListView ItemsSource="{Binding MyList}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
SelectionMode="Single">
<ListView.ItemTemplate>
.... as defined above
</ListView.ItemTemplate>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding ItemClickCommand}"
CommandParameter="{Binding SelectedItem}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ListView>
Any ideas on how I can resolve this?
UPDATE 1:
I'll re-phrase my question slightly. I've managed to bind the button displayed on the ListViewItem to a specific click event by introducing a RelayCommand (AdditionalInfoCommand) in the item's ViewModel. So now my main problem is the actual error mentioned above which is triggered after AdditionalInfoCommand and I assume it's because it is being captured by the ItemClickCommand. Strange as you would assume that it is using the same ViewModel.
Is there a way to no trigger the itemclick when this button is tapped?
Thanks.
Thierry
I figured it out.
When I tap the button inside my ListView DataTemplate, the button is being passed the Item's ViewModel which is correct but then the tap event is bubbled up back to the parent which is captured by:
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding ItemClickCommand}"
CommandParameter="{Binding SelectedItem}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
While there may be a solution to stop the event bubbling, to circumvent the problem, I changed my ItemClickCommand.
It was defined as follows:
private RelayCommand<MyItemViewModel> _itemClickCommand;
public RelayCommand<MyItemViewModel> ItemClickCommand
{
get { return this._itemClickCommand ?? (this._itemClickCommand =
new RelayCommand<MyItemViewModel>((viewModel) =>
ItemClickCommandAction(viewModel))); }
}
I simply changed it to:
private RelayCommand<object> _itemClickCommand;
public RelayCommand<object> ItemClickCommand
{
get { return this._itemClickCommand ?? (this._itemClickCommand =
new RelayCommand<object>((viewModel) =>
ItemClickCommandAction(viewModel))); }
}
I then changed the ItemClickCommandAction to take in an object instead of MyItemViewModel and now, within the method, I check the type of the ViewModel being passed:
private void ItemClickCommandAction(object currentObject)
{
if (currentObject is MyItemViewModel)
{
//go to next page
}
}
I'm trying to use a SemanticZoom in my Windows 8 application and it seems to not work.
Do I do something wrong here ?
I tried pretty much everything I thought that could work but in vain : removed the rowdefinitions, removed the style, removed the templates but still not working...
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<SemanticZoom Grid.RowSpan="2">
<SemanticZoom.ZoomedInView>
<GridView x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource GridViewItemTemplateZoomIn}"
ItemsPanel="{StaticResource GridViewItemsPanelTemplate}"
helpers:ItemClickCommand.Command="{Binding ServiceClickCommand}">
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,10,6">
<Button AutomationProperties.Name="Group Title"
Style="{StaticResource TextPrimaryButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"
Margin="3,-7,10,10"
Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}"
FontFamily="Segoe UI Symbol"
Margin="0,-7,0,10"
Style="{StaticResource GroupHeaderTextStyle}" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"
Margin="0,0,80,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView x:Name="itemZoomOutGridView"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Padding="116,175,40,46"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource GridViewItemTemplateZoomOut}"
ItemsPanel="{StaticResource GridViewItemsPanelTemplate}"
ItemsSource="{Binding ServiceCategories}">
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
Thank you :)
If I understand your problem correctly, the semanticView in itself is working (you can zoom in and zoom out). But when you zoom back in the GridView items are the same and doesn't change according to the ZoomedOutView GridView item you selected.
But with your XAML I think this is normal behaviour, because when you select a category the binding on your gridview in zoomedInView doesn't change.
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
My first advice would be to bind the ItemsSource to a list in your ViewModel not use a staticRessource.
Secondly you can change the SemanticView this way:
<SemanticZoom Grid.RowSpan="2" ViewChangeStarted="SemanticZoomChanged" >
And in your code behind add that:
private void SemanticZoomChanged(object sender, SemanticZoomViewChangedEventArgs e)
{
// First we check that we are going from ZoomedOut to ZoomedIn
if (e.IsSourceZoomedInView == false)
{
// I call a method in my ViewModel giving the chosen category in parameter
DefaultViewModel.OnSelectedCategoryChanged(e.SourceItem.Item.ToString());
}
}
Using MVVM I know it's ugly to have code in code-behind but this is not a lot and we are calling a method in the ViewModel to do the logic so it's still following MVVM design pattern.
And last we add a function in the ViewModel that will change the ItemsSource of the ZoomedInView
OnSelectedCategoryChanged(string chosenCategory)
{
// Here change the value of your groupedItemsViewSource list
GroupedItemsViewSource = ....;
}
Now it should work as you want to.
I have to add events in Controls which reides in ResourceDictionary ex. List SelectionChanged Image Tap etc, please suggest how cna i do this
Views-> MainPage.XAML
<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackgroundColor}">
<phone:Panorama Name="Container" Grid.Row="0" ItemsSource="{Binding}" SelectionChanged="OnSelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True"
Background="{StaticResource AppBackground}" TitleTemplate="{StaticResource AppPanoramaTitle}">
<phone:PanoramaItem Name="GetGalleryItem" Content="{Binding GetGalleryModel}" ContentTemplate="{StaticResource GetGalleryContent}"/>
</phone:Panorama>
Views->DataTemplates->GetGallery.XAML
<Image Source="{Binding THUMB, Converter = {StaticResource ThumbnailConverter}, ConverterParameter = 120}" Width="120" x:Name="testTap"
Height="120" Stretch="Fill" />
<Image Source="{Binding CategoryImage}" Width="130" Height="130" Stretch="Fill" />
</Grid>
</DataTemplate>
</controls:LongListSelectorEx.ItemTemplate>
</controls:LongListSelectorEx>
</DataTemplate>
For the tap event in your image, you could use the tap key work within your Image tag. such as
Xaml:
<Image Tap="tap_image" Source="{Binding THUMB, Converter = {StaticResource ThumbnailConverter}, ConverterParameter = 120}" Width="120" x:Name="testTap"
Height="120" Stretch="Fill" />
.cs
private void tap_image(object sender, System.Windows.Input.GestureEventArgs e)
{
//do whatever you wanted
}
Yes you could use the SelectionChanged event for a listbox or a longlistselector.
Have a look over here
Hope it helps
When I call Page.Frame.Navigate is i possible to navigate to a page smaller than screen size and make it lay over the page i just navigated from in any simple way? The ideal solution would not involve a large framework and the need to rewrite large parts of the application. I am looking for this effect: Windows 8 Music App
I guess I could make a hack by passing a snapshot of the page being navigated from to the new page and using this as a backdrop but I would prefer a cleaner solution. I guess I also could access the navigation stack from the new page and render the old behind.
You could use the Popup element, as William Melani stated. Here's an example:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="btnPopup" Content="Open Popup" Click="btnPopup_Click_1" Grid.Row="0"></Button>
<Popup IsLightDismissEnabled="True" x:Name="popup1" Grid.Row="1" HorizontalAlignment="Center">
<StackPanel Background="Black">
<Border Background="Blue" BorderThickness="2">
<StackPanel>
<StackPanel Orientation="Vertical" Margin="10">
<TextBlock Text="User:" VerticalAlignment="Center" Margin="0,0,10,0" FontSize="20" />
<TextBox Height="40" Width="250" FontSize="20" />
<TextBlock Text="Mail:" VerticalAlignment="Center" Margin="0,0,10,0" FontSize="20" />
<TextBox Height="40" Width="250" FontSize="20" />
</StackPanel>
<Button HorizontalAlignment="Right" Margin="10">Accept</Button>
</StackPanel>
</Border>
</StackPanel>
</Popup>
And the button event:
private void btnPopup_Click_1(object sender, RoutedEventArgs e)
{
popup1.IsOpen = true;
}
Design isn't really my thing.