UWP - PointerExited is not fired when Grid is in Listview - win-universal-app

I want to show a image in the listview, and the pointer is over the image, I will display the filesize/filename and a download button at the bottom of the image. And I also can open the file by tap the image.
I registered the PointerEntered and PointerExited event of the control, and tried to show or hide the filesize/filename/download button when the events get fired.
When the finger touch the image, the PointerEntered is fired. However, on touch screen(Phone, tablet), when the finger left the image, the PointerExited event is not fired. When I operate with mouse on tablet, everything is working correctly.
Here is my code snippet:
<Grid>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerEntered" >
<Core:InvokeCommandAction Command="{Binding ShowFileInfoCommand}"></Core:InvokeCommandAction>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="PointerExited" >
<Core:InvokeCommandAction Command="{Binding HideFileInfoCommand}"></Core:InvokeCommandAction>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Image Source="{Binding ThumbnailUri}" Stretch="{Binding ImageStretch}" MaxHeight="200" MaxWidth="350" Height="{Binding FileHeight}" HorizontalAlignment="Right">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped" >
<Core:InvokeCommandAction Command="{Binding ConversationRoom.OpenFileFlipViewCommand,Source={StaticResource Locator}}" CommandParameter="{Binding}"/>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="RightTapped">
<Core:InvokeCommandAction Command="{Binding RightTappedMessageCommand}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Image>
<Grid Background="White" Opacity="0.75" Height="50" x:Name="InfoGrid" VerticalAlignment="Bottom" Visibility="{Binding NeedShowFileInfo, Converter={StaticResource BoolToVisible}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Margin="6,0,0,6" Text="{Binding FileName}"/>
<TextBlock Grid.Row="1" Margin="6,0,0,6" Text="{Binding FileSize}"/>
<FontIcon Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="0,0,6,6" Glyph="" FontFamily="../Assets/fontello.ttf#fontello">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Core:InvokeCommandAction Command="{Binding DownloadCommand}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</FontIcon>
</Grid>
</Grid>
And if I move the Grid out of the listview, but in a stackpanel/Grid, everything goes fine.
Can anyone help on this issue?
Thank you!

Related

Xamarin: Scrolling to a position of a ListView when the listview is contained inside of a CarouselViewControl

Is there any way to directly access a listview that is contained within a CarouselViewControl?
I have a Carousel for the left and right swiping and inside each page, there is a listview. However, since the ListView is contained within the CarouselViewControl, I can't access it directly via code to call the ScrollTo() function nor is the ScrollTo function bindable. I've also tried looping through all of the rendered controls via a FindVisualChildren extension and it appears that when the Carousel renders, it doesn't render the listview as a listview so I don't see any way that I can scroll to a specific vertical position within it.
I'm trying to make an alphabet selector (similar to the one on android's music player) so that when the user clicks a letter, it takes them to that position in the listview. However, it also has to be inside of a carousel view so that it shows a different list when they swipe between the other pages.
Anyone have any ideas if there's any [other] way to do this?
<controls:CarouselViewControl x:Name="RecipeList" Orientation="Horizontal" InterPageSpacing="10" ItemsSource="{Binding ProductList}"
VerticalOptions="FillAndExpand" PositionSelected="RecipeList_PositionSelected"
HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<controls:CarouselViewControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView x:Name="sublist" Margin="5,10,-10,-10" ItemSelected="RecipeList_ItemSelected" IsGroupingEnabled="True"
GroupDisplayBinding="{Binding Key}" ItemsSource="{Binding ProductsList}" VerticalScrollBarVisibility="Never"
SeparatorVisibility="None" HasUnevenRows="True" BackgroundColor="Transparent" SelectedItem="{Binding ScrolledItem}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="1">
<Label Text="" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MinimumHeightRequest="{StaticResource ImageSize}"
Padding="15,10,0,0">
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0" Margin="0,5,10,0" CornerRadius="10"
BackgroundColor="#FCFAF8" BorderColor="#F37623" HasShadow="True">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Image}" Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Aspect="AspectFit"/>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="{Binding ProductNane}" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" FontAttributes="Bold" FontSize="Medium" TextColor="Black" BackgroundColor="Transparent" Margin="0,5,0,0"/>
<Image Source="{Binding HeartImage}" Grid.Row="0" Grid.Column="1" HorizontalOptions="End" VerticalOptions="StartAndExpand" BackgroundColor="Transparent" HeightRequest="30" WidthRequest="30" Aspect="AspectFit" Margin="0,5,10,1" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="HreatImageClicked"/>
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding Description}" Grid.Row="1" Grid.Column="0" Style="{StaticResource StandardLabel}" FontSize="Small" MaxLines="2" LineBreakMode="TailTruncation" />
<lv:RatingImage Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" ImageDeselect="star_line.png" ImageSelect="yellow_star.png" ImageHeight="12" ImageWidth="12"
ItemsNumber="5" InitialValue="{Binding Rating}" HorizontalOptions="End" VerticalOptions="End"
SpaceBetween="2" IsReadOnly="True" Margin="0,0,2,0" />
</Grid>
</Grid>
</Frame>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="RecipeDetailPage" />
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>
Thanks!
I can't access it directly via code to call the ScrollTo() function nor is the ScrollTo function bindable.
You want to get ListView from CarouselViewControl DataTemplate, I think it is unreasonable, because it is just DataTemplate, I don't find any way to access control in DataTemplate.
So I suggest you can Create an ExtendedScrollView and expose the ScrollTo method into a read only bindable ICommand property. Bind it to your view model corresponding command and use it from there.
You can reuse the control everywhere and it can support any kind of scrolling scenario. You need to create an object to be used a the command parameter that will embed the parameters of ScrollTo, and use it inside the bindable ICommand inside ExtendedScrollView.

Align radio button to right side of popup

I have a popup for select colors.
<Popup x:Name="colorSelectorPopup">
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="colorSelectorTitle" Height="40" VerticalAlignment="Top">
<TextBlock x:Name="popupTitle" TextTrimming="CharacterEllipsis" FontSize="16" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="8"/>
</Grid>
<ListView x:Name="colorList" HorizontalAlignment="Stretch" Background="White">
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tbColor" Text="{Binding ColorName}" Foreground="{Binding ForegroundColor}" HorizontalAlignment="Left"/>
<RadioButton Grid.Column="1" x:Name="radioColor" GroupName="colorRadio" Tag="{Binding SelectionColor}" MinWidth="32" Checked="radioColor_Checked"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</Popup>
I want the radio button to show on the right side. But It looks as in the image.
How can I move the radio button to the right side?
I got the answer from here.
By Adding the following xaml I got the desired output.
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
This works for me. I have updated my xaml as follows
<Popup x:Name="colorSelectorPopup">
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="colorSelectorTitle" Height="40" VerticalAlignment="Top">
<TextBlock x:Name="popupTitle" TextTrimming="CharacterEllipsis" FontSize="16" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="8"/>
</Grid>
<ListView x:Name="colorList" HorizontalAlignment="Stretch" Background="White">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tbColor" Text="{Binding ColorName}" Foreground="{Binding ForegroundColor}" HorizontalAlignment="Left"/>
<RadioButton Grid.Column="1" x:Name="radioColor" GroupName="colorRadio" Tag="{Binding SelectionColor}" MinWidth="32" Checked="radioColor_Checked"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</Popup>
Since the grid only contains 2 columns and the 2nd column only contains the radio button I would set the column definition to a fixed with for the 2nd one instead of auto. see if that works.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>

Setting column width to 50% of available width in windows phone 8.1

Developing/learning about WP8.1 for the 1st time.
This question is about layout.
I have 2 buttons.
I want them at the bottom of my screen.
I want each button to take 50% of the available width of the screen.
Similar to this:
So far I have this:
And this is my markup:
<Page
x:Class="Informed.BasicPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Informed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
>
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0" Grid.ColumnSpan="2">
<Image Name="imgHeader" Grid.Row="0" Source="Images/bannershort.jpg" Stretch="UniformToFill"/>
<TextBlock Text="Log In" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel>
<StackPanel Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<TextBox Name="email" Header="Email address"/>
<PasswordBox Name="password" Header="Password"/>
<CheckBox Name="showPassword" Content="Show password"/>
<!-- Content body -->
<TextBlock Name="body" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap">
<TextBlock.Text>
Enter Email Address and Password created.
</TextBlock.Text>
</TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="0" Margin="0,0,0,0" Grid.ColumnSpan="1">
<Button Content="hello" Grid.Column="0" FontFamily="Global User Interface" />
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="1">
<Button Content="hello2" Grid.Column="1" FontFamily="Global User Interface" />
</StackPanel>
</Grid>
</Page>
Remove those StackPanels they are not needed. When you want something to take available space use HorizontalAlignment = Stretch:
<Button Content="hello" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
<Button Content="hello2" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
You will also need to make your columns equal width:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
You may also think of adding Margin="20,0,10,0" (first) and Margin="10,0,20,0" (second).
There is no point in putting one control inside panel (except some rare cases). You may also modify your code and put those Buttons inside a Grid then there is no need to make the whole main Grid with two columns:
<Grid Grid.Row="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="hello" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
<Button Content="hello2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
</Grid>

Gridview not scrolling horizontally in windows phone 8.1

.Gridview not scrolling horizontally in windows phone app instead it is scrolling vertically.I just copy paste the code of my windows 8.1 app to windows phone 8.1 but it is scrolling vertically.
here is the xaml code:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Assets/back3.png"></ImageBrush>
</Grid.Background>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height=".6*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Select Comic" Foreground="Black" FontSize="30" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1"></TextBlock>
<!-- Back button and page title -->
<GridView x:Name="myGridview" Grid.Column="1" Grid.Row="1" SelectionChanged="myGridview_SelectionChanged">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,20,20">
<Image Source="{Binding source}" Width="100" Height="100" Stretch="Fill"></Image>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
Try by putting
ItemsPanel,ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"
<GridView Width="400" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"></VirtualizingStackPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,20,20">
<Image Source="{Binding source}" Width="100" Height="100" Stretch="Fill"></Image>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Update
try by changing Itemspanel : WrapGrid Orientation="Vertical" or Orientation="Horizontal"
<GridView Width="400" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"></WrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,20,20">
<Image Source="{Binding source}" Width="100" Height="100" Stretch="Fill"></Image>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

Make grid align properly

In my app I'm displaying some info about users in a listbox. I've got most of the stuff as I want, but the layout is bugging me a bit.
It's made with grids, so that it'll re-size and fit portrait/landscape modes.
However, I cannot get the layout to "fix itself"... let me try and explain with pictures:
As you can see the numbers at the right side isn't aligned to the right edge of the screen. How do I achieve this?
Landscape mode looks almost okay:
Below is some of the XAML:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Picture, Mode=OneWay}" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="73" Height="73">
</Image>
<Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="0" Foreground="#FF3F9AC4" FontSize="28"
HorizontalAlignment="Left" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap">
</TextBlock>
<TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="1"
HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
Style="{StaticResource PhoneTextSmallStyle}">
</TextBlock>
</Grid>
<TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1"
HorizontalAlignment="Right" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap"
FontSize="24">
</TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
You need to set the ItemContainerStyle of your ListBox so it'll stretch the ListBoxItems.
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
You could try a simpler grid:
<Grid HorizontalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding Picture, Mode=OneWay}" Grid.Column="0" Grid.RowSpan="2"
VerticalAlignment="Center"
HorizontalAlignment="Center" Width="73" Height="73" />
<TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="1" Foreground="#FF3F9AC4" FontSize="28"
HorizontalAlignment="Left" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap" />
<TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="2"
HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
Style="{StaticResource PhoneTextSmallStyle}" />
<TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
VerticalAlignment="Center" Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap" FontSize="24" />
</Grid>

Resources