I have the following XAML:
<Grid>
<ListView x:Name="IconTextGrid" Height="500">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="220" Height="60">
<Border Background="#66727272" Width="40" Height="40" Margin="10">
<Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="Ay Lorem Ipsum" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
<TextBlock Text="Dolor sit amet" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto"/>
</ListView>
</Grid>
</Page>
Which should present items that can be selected by the user.
The problem here is that When I have more than few items (like more than 100) there is no horizontal scroll.
My question is why and how can I fix it?
thanks.
try doing this...
<Grid>
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
<ListView x:Name="IconTextGrid" Height="500">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="220" Height="60">
<Border Background="#66727272" Width="40" Height="40" Margin="10">
<Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="Ay Lorem Ipsum" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
<TextBlock Text="Dolor sit amet" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
</Grid>
Related
How can I make Hamburger menu on top and on bottom in XAML - UWP?
This is my SplitView.Pane
<SplitView.Pane>
<Grid>
<Border Background="{StaticResource PanelBackground}"/>
<ListView x:Name="navMenuList"
SelectionMode="Single"
IsItemClickEnabled="True"
Margin="0,0,0,0" ItemsSource="{Binding Menus}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="240" HorizontalAlignment="Left" Height="48">
<SymbolIcon Margin="2,0,0,0" Symbol="{Binding Symbol}" Foreground="White"/>
<TextBlock Margin="24,0,0,0" Text="{Binding Text}" VerticalAlignment="Center" Foreground="White"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="ItemClick">
<core:InvokeCommandAction Command="{Binding Path=MenuCommand}" CommandParameter="{Binding Target}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ListView>
</Grid>
</SplitView.Pane>
Is a good way to duplicite whole ListView with another binding?
// EDIT
I need something like this (but with more menu items :)):
<SplitView x:Name"RootSplitView">
</SplitView>
<ToggleButton x:Name="TogglePaneButton"
TabIndex="1"
Style="{StaticResource SplitViewTogglePaneButtonStyle}"
IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}"
Unchecked="TogglePaneButton_Checked"
AutomationProperties.Name="Menu"
ToolTipService.ToolTip="Menu" Background="#E53DAFBD" Foreground="#FFF9EAEA" />
You can try this code
<SplitView.Pane>
<Grid>
<StackPanel>
<ToggleButton x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Tapped="HamburgerButton_Tapped" Foreground="White"
FontSize="16" FontWeight="Bold" Style="{StaticResource HamburgerToggleButtonStyle}" />
<RadioButton Content="Top 1" x:Name="btn1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
<RadioButton Content="Top 2" x:Name="btn2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="True" Foreground="White" GroupName="HamMenu"/>
<RadioButton Content="Top 3" x:Name="btn3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
</StackPanel>
<StackPanel VerticalAlignment="Bottom">
<RadioButton Content="Bottom 1" x:Name="btn4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
<RadioButton Content="Bottom 2" x:Name="btn5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
</StackPanel>
</Grid>
</SplitView.Pane>
i have a listbox with around 150 items in it. the problem is that it is not taking any events. other listboxes have less than 90 items and they are working fine.
is there any limit or something which is preventing event handeling??
<ScrollViewer HorizontalAlignment="Left" Height="170" Margin="0,421,0,0" VerticalAlignment="Top" Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<ListBox Name="thirdList" Tap="firstList_SelectionChanged_1" Height="170" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0 0 0 0 " />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="170" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Stretch="UniformToFill" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock TextAlignment="Center" Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<StackPanel Width="165" Margin="0,-65,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock TextAlignment="Center" Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="White" FontSize="15" />
<TextBlock TextAlignment="Center" Text="{Binding price}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
vjamit please consider using LongListSelector for Windows Phone 8 applications and not the old ListBox.
I have tested LLS with more than 5k items and it loads and plays just fine.
Also there is no need at all to wrap LLS in a ScrollViewer. Check below example:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="LLSTemplate">
<Grid Tap="firstList_SelectionChanged_1">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<StackPanel Orientation="Vertical" Height="170" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Stretch="UniformToFill" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock TextAlignment="Center" Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<StackPanel Width="165" Margin="0,-65,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock TextAlignment="Center" Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="White" FontSize="15" />
<TextBlock TextAlignment="Center" Text="{Binding price}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector x:Name="thirdList" Height="170" ItemTemplate="{StaticResource LLSTemplate}"/>
</Grid>
Let me know if the above works.
EDITED:
Try applying the following changes on the ScrollViewer: HorizontalScrollBarVisibility="Disabled". Tested with 500+ and it works. Seems like a "bug".
I have 5 horizontal listboxes with images and text in them.. the text is shown in textblock inside stackpanel(background as grey).. now if i change the background to black and opacity to 0.3, I start getting outofmemory.. what could be wrong?? here's my listbox :
<ScrollViewer x:Name="scroll1" HorizontalAlignment="Left" Height="200" Margin="0,27,0,0" VerticalAlignment="Top" Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" >
<ListBox Name="firstList" Height="200" ScrollViewer.VerticalScrollBarVisibility="Disabled" Tap="firstList_SelectionChanged_1" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0 0 0 0 " />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="200" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="UniformToFill" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<Grid Margin="70,-240,-10,0" Width="50" Height="50" Background="Transparent">
<!--<TextBlock Text="Discount" Foreground="White" FontSize="15" Margin="15,0,5,0"/>-->
<Image Source="{Binding imageSource}" Width="50" Height="50" ></Image>
<TextBlock Text="{Binding discountPercentage}" TextWrapping="NoWrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
</Grid>
<StackPanel Width="150" Margin="0,-35,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<!--<TextBlock Text="Rs" Foreground="White" FontSize="20" Margin="30,0,5,0"/>-->
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
I have tried this and got outofmemoryerror:
<StackPanel Orientation="Vertical" Height="200" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="UniformToFill" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<Grid Margin="70,-240,-10,0" Width="50" Height="50" Background="Transparent">
<!--<TextBlock Text="Discount" Foreground="White" FontSize="15" Margin="15,0,5,0"/>-->
<Image Source="{Binding imageSource}" Width="50" Height="50" ></Image>
<TextBlock Text="{Binding discountPercentage}" TextWrapping="NoWrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
</Grid>
<StackPanel Width="150" Margin="0,-35,0,0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black" Opacity="0.3">
<TextBlock Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</StackPanel>
self resolved. By replacing grid/stackpanel with a textblock on transparent image.
I'm new in XAML, please help me why I can't get click event.
I can get Tapped event on DataTemplate/Grid by I need exact ID of the item clicked.
Here is my grid:
<GridView
x:Name="newsGridView"
SelectionMode="None"
IsSwipeEnabled="false"
ItemsSource="{Binding Source={StaticResource newsViewSource}}"
ItemClick="newsGridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="160" Height="160">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Text}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Text}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
My event handler
private void newsGridView_ItemClick(object sender, ItemClickEventArgs e)
{
var s = sender as NewsObject;
}
TIA
you have to assign IsItemClickEnabled property
<GridView
x:Name="newsGridView"
SelectionMode="None"
IsSwipeEnabled="false"
ItemsSource="{Binding Source={StaticResource newsViewSource}}"
IsItemClickEnabled="true"
ItemClick="newsGridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="160" Height="160">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Text}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Text}"
Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}"
Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
Style="{StaticResource CaptionTextStyle}"
TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I trying to build a winRT metro application that use a GridView. I get the GridView and it looks like I want it to do. But the horizontal scroll doesn't work. When I drag the content it move but when I release it, it will return to start.
Anyone that know why it doesn't work?
<Page
x:Class="WR.Levels"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Wordy"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:uc="using:Wordy.UserControls"
mc:Ignorable="d">
<UserControl.Resources>
<CollectionViewSource x:Name="cvsLevels" IsSourceGrouped="True"/>
<CollectionViewSource x:Name="cvsCategories" IsSourceGrouped="True" ItemsPath="Levels"/>
</UserControl.Resources>
<Canvas x:Name="innertialCanvas"
Grid.Row="1"
Background="#FF3D6E4F"
>
<uc:BG HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="84"/>
<RowDefinition Height="700"/>
</Grid.RowDefinitions>
<StackPanel Margin="20,20,0,0" Grid.Row="0" Orientation="Horizontal">
<Button x:Name="backButton" Style="{StaticResource BackButtonStyle}" Margin="10" VerticalAlignment="Center" >Back</Button>
<TextBlock Name="appName" Text="WR" FontSize="48" VerticalAlignment="Center" />
</StackPanel>
<GridView ItemsSource="{Binding Source={StaticResource cvsCategories}}" Margin="0,0,0,0"
IsItemClickEnabled="True" SelectionMode="None" MaxHeight="700" Grid.Row="1"
AutomationProperties.AutomationId="LevelsGrid">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Width="150" Height="130" Margin="10" AutomationProperties.AutomationId="Level">
<StackPanel.Background>
<SolidColorBrush Color="White" Opacity="0.2" />
</StackPanel.Background>
<StackPanel Orientation="Horizontal" Margin="10">
<uc:Stars Height="50" Width="50" />
<uc:Stars Height="50" Width="50" />
</StackPanel>
<TextBlock Text="{Binding Name}" Margin="0,10,0,0" FontSize="24" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0">
<TextBlock Text='{Binding Name}'
Foreground="White" Margin="20"
Style="{StaticResource HeaderTextStyle}" AutomationProperties.AutomationId="LevelGroup"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Margin" Value="3,0"/>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
</Canvas>
</Page>
When I removed the canvas tag it worked!