I am trying to fire event on tap of listbox item and get the item clicked but the tap event is not firing, please help.
<ListBox Margin="0,40,0,0"
ItemsSource="{Binding Documents}" IsHitTestVisible="True"
Width="450"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="150" Margin="5"
Width="150" Background="Aqua">
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" />
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<commands:MvxEventToCommand Command="{Binding OpenFileCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Are you sure the event never get fired? Maybe you were tapping outside the Grid? Listbox item content (the grid in this case) is not stretcing throughout listbox width, it is aligned left by default. To confirm, try to tap at left most area of listbox item and see if the event fired with that.
Assuming the problem is caused by listbox item content not stretching, you can try to set HorizontalContentAlignment="Stretch" to fix it :
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
Related
Here I am again...
I have a ListView which loads items and prints them in the screen.
Everything is fine except I can't really make the XAML to work as I want it to.
The ListView outputs the content according to the DataTemplate which is supposed to output a "chat-like" display.
<DataTemplate x:Key="MessageListDataTemplate" x:DataType="disc:IMessage">
<Border Background="#2C2F33" BorderThickness="0,1,0,1" BorderBrush="Transparent" CornerRadius="5">
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="5,2,0,0">
<TextBlock TextAlignment="Left" Text="{x:Bind Author,Mode=OneWay}" Foreground="White" FontSize="14"/>
<TextBlock TextAlignment="Left" Margin="5,3,0,0" Text="{x:Bind Timestamp,Mode=OneWay,Converter={StaticResource TimeToStringConverter}}" Foreground="LightGray" FontSize="10"/>
</StackPanel>
<TextBlock TextAlignment="Left" Margin="10,2,0,0" TextWrapping="WrapWholeWords" Text="{x:Bind Content, Mode=OneWay}" Foreground="#99AAB5" FontSize="20" />
</StackPanel>
</Border>
</DataTemplate>
The code is functional and it outputs this:
Instead of having the board to be sized according to the size of the message I would like it to be equal to the size of the screen. I have tried everything I know. Thank you!
Try adding the following style for the ListView:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
In the example below, the ListView control understands the width of it's parent container RelativePanel. When looking a the layout in the designer, it is clear that the ListView is filling out to the full width of the RelativePanel. However, even though the RelativePanel inside the DataTemplate is also asking to fill out the width of the parent, it ignores the "align left" and "align right". I can't seem to find any way to get it to recognize it's parent container's size.
Any suggestions here would be appreciated.
<RelativePanel RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<ListView Name="LstOrders" ItemsSource="{x:Bind Vm.OrdersList, Mode=OneWay}"
SelectionMode="None"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,5,0,0">
<ListView.ItemTemplate>
<DataTemplate x:DataType="genericOrder:OrderThumbnailVm">
<RelativePanel Name="PanelThumbnail" Margin="0,0,20,0">
<RelativePanel Name="PanelOrderDetails"
Background="BlueViolet"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<TextBlock Text="{x:Bind Name}" Margin="8,0,0,0" VerticalAlignment="Center"
Foreground="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource DeletedColor}}"
TextWrapping="WrapWholeWords"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.LeftOf="BtnDeleteRestore"/>
<Button Name="BtnDeleteRestore"
Content="{x:Bind DisplayDelete, Mode=OneWay}"
Click="{x:Bind DeleteOrder}"
RelativePanel.AlignRightWithPanel="True"
FontSize="10"
Height="20"
Padding="0"
Visibility="{x:Bind ShowDeleteButton, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
</RelativePanel>
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativePanel>
That is because the value of HorizontalContentAlignmentof ListViewItem is Left, we need to override it and make it Stretch. You can find it in the ListViewItem styles and templates.
To solve this problem, as I said, we need to override its style, for example like this:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<RelativePanel>
...
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am looking to add WrapPanel inside my ListBox so that it's item wrap both vertically and horizentally. I was able to achieve this in Windows Phone 8 Sliverlight with Microsoft toolkit with below code;
Windows Phone 8
<ListBox x:Name="ListSection" ItemsSource="{Binding Section}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20">
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock Style="{StaticResource PhoneTextBlockBase}"
HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
I understand that Microsoft toolkit it not available in UWP, is there any possibility I could achieve such behavior in UWP?
UWP not working
<ListBox x:Name="ItemsListBox" ItemsSource="{Binding Section}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks!
You must use ListView and ItemsWrapGrid as ItemsPanel
you can check the MSDN docs here with examples
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx
This example is for GridView but is the same for ListView
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
you can use the property Orientation to set your items vertically or horizontally.
There is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.
You can get it from NuGet.
Then in your Page add this prefix:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.
#ARH you need to create a custom Panel class which inherits panel class and override MeasureOverride and ArrangeOverride methods.check out following links for reference.
https://msdn.microsoft.com/en-us/library/windows/apps/mt228347.aspx
http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
The WrapPanel is available from the Microsoft UWP Toolkit.
Here's some sample code (using v5.0.0):
...
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
...
<ListView
Name="WrapPanelContainer"
Width="310" Height="200"
Margin="0,40,0,0"
HorizontalAlignment="Left"
Background="LightBlue"
IsItemClickEnabled="True"
>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel VerticalSpacing="10" HorizontalSpacing="10" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Rectangle Fill="Red" Width="100" Height="50"/>
<Rectangle Fill="Blue" Width="200" Height="50"/>
<Rectangle Fill="Green" Width="50" Height="50"/>
<Rectangle Fill="Yellow" Width="150" Height="50"/>
</ListView>
NOTE: The ListItemView style here removes superfluous padding, allowing the WrapPanel spacing properties to be the control points for layout.
In my Windows 8.1/Windows Phone 8.1 App, I have a GridView and I want to change my VisualState after an item is selected. I can do this easy with behavior like this :
<GridView IsItemClickEnabled="True" ItemsSource="{Binding Collections}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="SelectionChanged">
<Core:GoToStateAction StateName="NextVisualState"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<GridView.ItemTemplate>
<DataTemplate >
<Grid Width="80" Height="80">
<TextBlock Text="{Binding ItemName}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MinWidth="150"></ItemsWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
The problem occur when my item is already selected (The user can be on this VisualState with the Item already selected by binding or something), I want the SelectionChanged event to be fired if the user click on an item that already selected (so he can go to the next VisualState).
I try to change the VisualState on the ItemClick event but the event is fired before the item is selected so it's not working.
<GridView ItemsSource="{Binding Collections}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}" x:Name="MyGridView">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="80" Height="80" Background="Transparent">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Core:InvokeCommandAction Command="{Binding DataContext.ChangeStateCommand, ElementName=MyGridView}" CommandParameter="NextState"></Core:InvokeCommandAction>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<TextBlock Text="{Binding ItemName}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MinWidth="150"></ItemsWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
I had to set a background in the Grid Datatemplate to make the whole Grid clickable I don't know why.
Select your Gridview control
Change selected Index property from 0 to -1
I'm not sure whether it works or not, but you can try.
This problem is about the listbox itself and not it's cells. If I put listbox into a viewbox, and click on an item, the whole listbox will be surrounded with a 1px border. I do not want that, because it is ugly. How to remove this border?
Details:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Viewbox Grid.Row="1" Stretch="Uniform">
<StackPanel Orientation="Horizontal" Margin="0,20,0,20">
<Grid Width="200">
<ListBox ItemsSource="{Binding Rajzelemek}" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentControl Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Content="{Binding Ikonja}" Width="25" Height="25" VerticalAlignment="Center" />
<TextBlock Text="{Binding}" VerticalAlignment="Center" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</StackPanel>
</Viewbox>
</Grid>
If I comment the <Viewbox Grid.Row.... part, everything is fine, but not scaled. I want stuff to get scaled, well that is why I use the viewbox, but I do not want this border:
The code above was put on a metro BlankPage1 too, and made the same thing.
I think you're looking for what's in the ListBoxItem template wherein there's a Rectangle acting as a Focus Visual, if you check out the default template you'll see it with a default brush attributed to it (FocusVisualWhiteStrokeThemeBrush) which you could either change in the template, or provide your own resource for it to find before it hits the default dictionaries like;
<SolidColorBrush x:Key="FocusVisualWhiteStrokeThemeBrush" Color="Transparent" />
Hope this helps.
EDIT
Sorry I was going by the picture you have, thought it was the item. In any case since your ViewBox is the culprit you just need to interact with the Border control within it >like you showed in a previous post of your own< where you're the one making that border. Something like;
<Viewbox>
<Viewbox.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</Viewbox.Resources>
...
</ViewBox>