Correct AbsoluteLayout positioning/overlay - overlay

The main goal of the task to create AutoSuggest control.
In my case AutoSuggest control is custom control inherited from Grid
<Grid xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...
xmlns:handlers ="clr-namespace:CrowdExchangeV2.Controls.Handlers"
WidthRequest="150">
<Grid.RowDefinitions>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Frame Grid.Row="0"
...>
<handlers:BorderlessEntry Placeholder="{Binding Source={x:Reference this}, Path=Placeholder}"
WidthRequest="150"
.../>
</Frame>
<AbsoluteLayout
WidthRequest="150"
MaximumHeightRequest="100"
Grid.Row="1"
x:Name="resAl">
<ScrollView
MaximumHeightRequest="100"
MaximumWidthRequest="160"
x:Name="resSV">
<CollectionView x:Name="list">
<CollectionView.ItemTemplate>
<DataTemplate>
<HorizontalStackLayout VerticalOptions="Center"
HorizontalOptions="Start">
<Label Text="{Binding Key}" Padding="0,0,4,0"/>
<Label Text="{Binding Value}"/>
</HorizontalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</AbsoluteLayout>
</Grid>
So, control looking for suggestions in Dictionary while user typing text in Entry. The thing is - when CollectionView updates suggestions it pushes all the other elements on ContentPage down... but suppose to overlay them. All right lets wrap Suggester in AbsoluteLayout on contentPage and setBounds to a desirable position. (PS: Suggester name is suggester 0_o)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...
Title=" ">
<AbsoluteLayout x:Name="mainAbs">
<AbsoluteLayout Margin="0,0,0,0"
x:Name="suggestAl">
<suggester:Suggester Placeholder="USD"
SearchDictionary="{Binding SearchCurrency}"
MaximumHeightRequest="150"
MaximumWidthRequest="150"/>
</AbsoluteLayout>
<Grid Padding="10" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<ScrollView>
<VerticalStackLayout>
...
<Frame HorizontalOptions="Fill">
<VerticalStackLayout>
...
<VerticalStackLayout HeightRequest="80"
x:Name="currVSL">
<Label Text="Currency out:"
VerticalOptions="Start"
HorizontalOptions="Start"
FontSize="Header"
x:Name="curLbl"/>
**SUggester should be here**
</VerticalStackLayout>
</VerticalStackLayout>
</Frame>
</VerticalStackLayout>
</ScrollView>
</Grid>
</AbsoluteLayout>
</ContentPage>
The first idea is - to grab x:Name="currVSL" bounds, adjust it for size of Label, and place x:Name="suggestAl" there, but i cant get absolute position of x:Name="currVSL" only relative and in absolute terms it's wrong
I don't want to hardcode position in static numbers, because the position highly depends on a particular device.
So the question is how to achieve a desirable result - Place x:Name="currVSL" under the x:Name="curLbl" label.
OR
Might be there is a more elegant solution to show suggestion results without pushing all the other elements down?(Read:overlay other elements on UI)
Image to visualise UI

Related

How to change position of the app title in .NET MAUI?

I want to change the position of title to the middle or right side of the screen. I used the following code:
<Shell
x:Class="CostManagement.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CostManagement"
Shell.FlyoutBehavior="Disabled"
FlowDirection="RightToLeft">
<ShellContent
Title="Main Page"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
</Shell>
How can I change its position?
This can be customized by setting the Shell.FlyoutContent and use the CollectionView to define the appearance of the menu item like the title as you said. You can refer to the code sample below:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="CostManagement.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CostManagement"
FlyoutBackgroundColor="LightGray"
FlyoutBehavior="Flyout"
FlyoutWidth="400"
FlyoutHeight="400">
<Shell.FlyoutContent>
<CollectionView BindingContext="{x:Reference shell}" ItemsSource="{Binding FlyoutItems}" IsGrouped="True">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="40,*" Padding="10">
<Image Source="{Binding Icon}"></Image>
<Label Grid.Column="1" Text="{Binding Title}" TextColor="Black"></Label>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Shell.FlyoutContent>
</Shell>

CollectionView rowspacing

I try to use a CollectionView to display simple tabular text.
It seems like the (visual) minimum spacing between rows in a CollectionView is quite large.
In my case I'm using some Labels within a DataTemplate, all with default values (except for the bindings of text of course) with default font size and the visually empty (valuable screen surface) is close to twice the height of the characters in the text.
Is it possible to make such a tabular view denser?
(Not necessarily by a CollectionView, but any View which is capable of displaying such data)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:vm="clr-namespace:MauiApp1.ViewModels" x:Class="MauiApp1.MainPage" Title="MainPage">
<ContentPage.BindingContext>
<vm:CollectionViewModel/>
</ContentPage.BindingContext>
<Grid>
<CollectionView VerticalScrollBarVisibility="Always" SelectionMode="Multiple" ItemsSource="{Binding Items}" BackgroundColor="Black">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="150,150,*">
<Label TextColor="White" Grid.Column="0" Text="{Binding Name}" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</ContentPage>

Xamarin.Forms DataTemplateSelector not working for HeaderTemplate in CollectionView

I have declared some Datatemplates for my Collectionviews Header to use as an Template.
<ResourceDictionary>
<!--#region HeaderTemplates-->
<DataTemplate x:Key="translationHeaderTemplate">
<Frame x:Name="translationDropTarget" Margin="5">
<Label Style="{x:StaticResource boldLabelStyle}" Text="{Binding SolutionDisplay}" FontSize="Medium" HorizontalOptions="Center" HeightRequest="50" VerticalOptions="Center" x:Name="FrameLabel"></Label>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<DataTemplate x:Key="pictureHeaderTemplate">
<Frame x:Name="pictureDropTarget" Margin="5">
<Image Source="{Binding SolutionIconString}" HorizontalOptions="FillAndExpand" MinimumWidthRequest="50" HeightRequest="100" VerticalOptions="CenterAndExpand" x:Name="FrameImage"></Image>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<DataTemplate x:Key="ttsHeaderTemplate">
<Frame x:Name="ttsDropTarget" Margin="5">
<forms:AnimationView x:Name="XAnim" AutoPlay="true" VerticalOptions="CenterAndExpand" RepeatMode="Infinite" HorizontalOptions="CenterAndExpand" Animation="soundIcon.json"
Clicked="XAnim_Clicked" ></forms:AnimationView>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<!--#endregion-->
<DataTemplate x:Key="translationTemplate">
<Frame HasShadow="True" CornerRadius="15" VerticalOptions="Start" HeightRequest="70">
<StackLayout>
<Label
Text="{Binding DisplayString}"
Style="{x:StaticResource mediumlabelStyle}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
FontSize="Small">
</Label>
</StackLayout>
<Frame.GestureRecognizers>
<DragGestureRecognizer
DragStartingCommand="{Binding Path=BindingContext.DragStartingCommand, Source={x:Reference ViewCollection}}"
DragStartingCommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<vokabelmodul:VocabularyViewTemplateSelector
x:Key="vocViewTemplateSelector"
TranslationTemplate="{StaticResource translationHeaderTemplate}"
PictureTemplate="{StaticResource pictureHeaderTemplate}"
TTSTemplate="{StaticResource ttsHeaderTemplate}"/>
</ResourceDictionary>
</ContentPage.Resources>
And I'm trying to consume it within my CollectionView with the templateselector :
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Frame>
<StackLayout>
<Label Style="{x:StaticResource labelStyle}" FontSize="Small" x:Name="TimerLabel" Text="{Binding Remaining}"></Label>
<ProgressBar x:Name="Progress" Progress="{Binding Progress}" ProgressColor="Blue"></ProgressBar>
</StackLayout>
</Frame>
<StackLayout x:Name="InnerStack">
<CollectionView
x:Name="ViewCollection"
ItemsSource="{Binding ViewObjects}"
VerticalOptions="Center"
Margin="5"
ItemTemplate="{StaticResource translationTemplate}"
HeaderTemplate="{StaticResource vocViewTemplateSelector}"
Header="{Binding .}"
>
<CollectionView.EmptyView>
<Label Text="No VocabularyItems!" Style="{x:StaticResource boldLabelStyle}"></Label>
</CollectionView.EmptyView>
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
HorizontalItemSpacing="5"
VerticalItemSpacing="5"
Span="2"/>
</CollectionView.ItemsLayout>
</CollectionView>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
But when I run the Programm I'm always getting "System.InvalidOperationException: 'LoadTemplate should not be null'".
When I'm binding my HeaderTemplate directly like this:
HeaderTemplate="{StaticResource someHeaderTemplate}"
it works just fine.
I've added a log and breakpoint to my TemplateSelector Class but OnSelectTemplate doesn't even get called.
I've also used another Templateselector for my ItemTemplate and that one worked just fine.
Any Help would be appreciated.
In your xaml page, your DataTemplate tag does not add any data or styles, you need to add styles to each DataTemplate tag.
You have not bound the Header data of the CollectionView. You need to add Header="{Binding ViewObjects}" to your CollectionView tag.
This is my xaml code for your reference, I hope it can solve your problem:
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="someHeaderTemplate">
<Label Text="aaa" BackgroundColor="LightPink"></Label>
</DataTemplate>
<DataTemplate x:Key="someOtherHeaderTemplate">
<Label Text="bbb" BackgroundColor="Green"></Label>
</DataTemplate>
<DataTemplate x:Key="someThirdHeaderTemplate">
<Label Text="ccc" BackgroundColor="Yellow"></Label>
</DataTemplate>
<nameSpace:templateSelector x:Key="templateSelector"
first="{StaticResource someHeaderTemplate}"
second="{StaticResource someOtherHeaderTemplate}"
third="{StaticResource someThirdHeaderTemplate}"/>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<CollectionView
x:Name="ViewCollection"
Header="{Binding ViewObjects}"
ItemsSource="{Binding ViewObjects}"
VerticalOptions="Center"
Margin="5"
HeaderTemplate="{StaticResource templateSelector}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label></Label>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>

Telerik Xamarin RadListView weird behavior

In Xamarin Forms (Portable) project when I place RadlistView in first page I got binded list which not render template in Android. I not checked other platforms. In this case the RadListView in second page is rendered ok.
First page with RadListView
Second page with RadListView
But if I replace radlistview in first page with Xamarin.Forms.ListView, it showed normal but in the second page RadListView showed without template.
The first page with Xamarin ListView
Second page with RadListView losted template
First page code below :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Name="Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:viewmodels="clr-namespace:InRestoApp.ViewModels"
xmlns:behaviors="clr-namespace:InRestoApp.Behaviors"
xmlns:helpers="clr-namespace:InRestoApp.Helpers"
x:Class="InRestoApp.Views.HallsPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="10, 20, 10, 0" />
<On Platform="Android, UWP" Value="10, 0" />
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Resources>
<helpers:InvertBoolConverter x:Key="invertBoolConverter"/>
</ContentPage.Resources>
<Grid HeightRequest="800">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<telerikDataControls:RadListView x:Name="ItemsListView" SelectionMode="Single" HeightRequest="800"
ItemsSource="{Binding Halls}"
ItemTapped="ListView_OnItemTapped">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="5" HasShadow="True" OutlineColor="#4488F6" Padding="10" Margin="10">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding HallCode}" FontSize="Large" VerticalOptions="StartAndExpand" />
<Label Text="{Binding HallName}" FontSize="Medium" VerticalOptions="CenterAndExpand" />
</StackLayout>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
</ContentPage>
Second view XAML below (Used ContentView because it is openening as slide drawer)
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
xmlns:helpers="clr-namespace:InRestoApp.Helpers"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
x:Name="productView"
x:Class="InRestoApp.Views.ProductsView">
<ContentView.Resources>
<helpers:ImageBytesConverter x:Key="imageBytesConverter"/>
<helpers:TempConverter x:Key="tempConverter"/>
<helpers:ImageFileToImageSourceConverter x:Key="imageFileToImageSourceConverter"/>
</ContentView.Resources>
<ContentView.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame CornerRadius="2" HasShadow="True" OutlineColor="Aquamarine" Padding="10" Margin="2">
<Image x:Name="btnClear" Source="clear_icon.png" HeightRequest="50" WidthRequest="50" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.ClearProductsFilterCommand, Source={x:Reference productView}}" CommandParameter="{Binding .}" />
</Image.GestureRecognizers>
</Image>
</Frame>
<telerikDataControls:RadListView x:Name="CategoriesListView" Grid.Row="1" SelectedItem="{Binding SelectedProductCategory, Mode=TwoWay}" SelectionMode="Single"
ItemsSource="{Binding ProductCategories}">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<!--<telerikDataControls:RadListView.ItemStyle>
<telerikListView:ListViewItemStyle BackgroundColor="Transparent" BorderLocation="None"/>
</telerikDataControls:RadListView.ItemStyle>-->
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="10" HasShadow="True" OutlineColor="#4488F6" Padding="10" Margin="10" >
<StackLayout Orientation="Horizontal">
<StackLayout>
<ffimageloading:CachedImage HeightRequest="70" Aspect="AspectFill" WidthRequest="70" Margin="5"
DownsampleHeight="70" DownsampleUseDipUnits="false"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding FileName, Converter={StaticResource imageFileToImageSourceConverter}}"/>
<Label Text="{Binding ProductCategoryName}" FontSize="Medium" VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
<telerikDataControls:RadListView x:Name="ProductsListView" Grid.Column="1" SelectedItem="{Binding SelectedProduct, Mode=TwoWay}" SelectionMode="Single"
ItemsSource="{Binding Products}">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="10" HasShadow="True" OutlineColor="#4488F6" Margin="5" HeightRequest="110" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage HeightRequest="70" Aspect="AspectFit" WidthRequest="70" Margin="2"
DownsampleHeight="50" DownsampleUseDipUnits="false"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding FileName, Converter={StaticResource imageFileToImageSourceConverter}}"/>
<Label Text="{Binding RestProductNameEntity.ProductName}" FontSize="Medium" VerticalOptions="CenterAndExpand" Grid.Row="1" />
<telerikInput:RadNumericInput Value="{Binding Quantity, Mode=TwoWay}" Grid.Row="2" HeightRequest="20" />
</Grid>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
</ContentView.Content>
</ContentView>
c# file not providing because it used web api from another project, also using dummy source has same effect. As source used
ObservableCollection
I forgot add that before issue I updated Telerik Xamarin platform. After clean solution, deleting bin and obj folders and rebild project it solved.

Attached Behaviors in Windows Store Apps with MVVM Light

I've been trying to use Attached Behaviors in a simple Windows Store App using the MVVM Light framework. Since we can't use System.Windows.Interactivity, as in Windows Phone, I've been using both Windows.UI.Interactivity and WinRtBehaviors lybraries. They work well but the problem is that I can't declare an attached behavior inside a data template.
What I really want is to attach a command to any item in a GridView, so that I can pass the item id as the parameter. Since that attached behavior doesen't work, the only solution I found consists on using the "SelectionChanged" event of the GridView and pass the SelectedItem as the parameter to a property in the ViewModel:
<GridView Grid.Row="1"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Padding="116,136,116,46"
ItemsSource="{Binding GeoTopArtists.topartists.artist}"
SelectionMode="Single"
SelectedItem="{Binding SelectedArtist, Mode=TwoWay}"
IsSwipeEnabled="False"
IsItemClickEnabled="False">
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Event="SelectionChanged" Command="SelectArtistCommand" CommandParameter="{Binding SelectedArtist.mbid}"/>
</WinRtBehaviors:Interaction.Behaviors>
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding image[4].text}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding url}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
It would be very nice doing something like that (where there's no need to have a SelectedArtist property in the ViewModel)
<GridView Grid.Row="1"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Padding="116,136,116,46"
ItemsSource="{Binding GeoTopArtists.topartists.artist}"
SelectionMode="None"
IsSwipeEnabled="False"
IsItemClickEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding image[4].text}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding url}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Event="Tapped" Command="SelectArtistCommand" CommandParameter="{Binding Artist.mbid}"/>
</WinRtBehaviors:Interaction.Behaviors>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This link may help you out. The dependency property is defined and hooked to a command in view model. So whenever there is interaction in view, the selected item can be sent as commanding parameter which is clearly demonstrated in this video.