GridView with 2 rows and horizontal scroll - c#

im trying to achieve something looking like this using a GridView in a Windows Store App project
i can get my items in a single line with horizontal scroll, but i want to have a GridView with 2 rows.
<GridView Grid.Row="1" Margin="22,0,0,0" Style="{StaticResource GridViewStyle}" SelectionMode="None" ItemsSource="{Binding UserPhotos}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<GridView.ItemTemplate>
<DataTemplate>
<Ellipse HorizontalAlignment="Left" Height="30" Width="30" Margin="0,7,10,0">
<Ellipse.Fill>
<ImageBrush Stretch="Uniform" ImageSource="{Binding}"/>
</Ellipse.Fill>
</Ellipse>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
what should i change/add to get this result?

I have to say that is not really intuitive and the default behavior is usually vertical for the scrollviewer, here is the solution:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer VerticalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled">
<GridView Grid.Row="1" Margin="22,0,0,0" SelectionMode="None" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Ellipse Stroke="Black" Width="144" Height="144"></Ellipse>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.Items>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
<x:String>11</x:String>
<x:String>12</x:String>
<x:String>13</x:String>
<x:String>14</x:String>
</GridView.Items>
</GridView>
Replace with your template and itemssource as you had

Related

XAML listview items Background always rose color

When i get the listviewitem in focus the background color is always rose color.Couldnt understand why i get the color. Can i make the color disappear
<Grid x:Name="Playlist" Visibility="{Binding IsShow}" Width="960" >
<Image x:Name="Bgimage" HorizontalAlignment="Center" Height="540" VerticalAlignment="Center" Width="960"/>
<ListView x:Name="listview" ScrollViewer.HorizontalScrollBarVisibility="Visible" ItemsSource="{Binding Path=YourCollection}"
ScrollViewer.HorizontalScrollMode="Enabled" GotFocus="StackPanel_GotFocus" IsItemClickEnabled="True" ItemClick="ListView_ItemClick" Margin="125,262,125,19" Foreground="{x:Null}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Height="200"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="200" Width="256">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}" Height="144" Width="256" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Height="56" Width="256" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Image x:Name="image" Source="Assets\Square150x150Logo.scale-200.png" HorizontalAlignment="Left" Height="105" Margin="10,320,0,0" VerticalAlignment="Top" Width="105"/>
</Grid>

WPF GridView: Determining held item

I'm trying to highlight the selected item in a bridview from a windows application.
To be more precise:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="openRessource"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200" Height="250" Holding="openHoldMenu">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding icon}" Stretch="None"/>
</Border>
<Image Source="{Binding downloaded}" Width="30" Height="30" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Mode=OneWay}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
<TextBlock Text="{Binding description, Mode=OneWay}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This is my XAML, fairly simple, I just have a Holding event which brings up a menu in my page.
My problem is that I want to know which item has been held to create a border around it so that the user knows which item is selected.
I can easily access the bound item in my list but can't get the grid element selected.
If anyone know how to, that would be really appreciated.
Thank you!
Should be able to make a trigger such as this:
http://stackoverflow.com/questions/4539909/wpf-datagrid-selected-row-style

When Item is selected from Combo Box, some element with Combo Box Light Dismiss is getting generated - XAML

On one of the XAML Pages, I have 3 combo boxes on left side and ListView with Horizontal Scroll on the right.
The three combo boxes are not cascading combo boxes. If I click any of the three combo boxes, under "PopupRoot", some ComboBoxLightDismiss gets generated which has width and height of the entire screen. This leave my screen in the hang state as this is some invisible canvas. I am not able to figure out the reason for this.
Visual Tree before Combo box Click
Visual Tree after Combo Box is click or any item is selected
I am adding the XAML code for the left User Control of the combo boxes as well the page below:
UserControl XAML Code which includes 3 Combo Boxes
<StackPanel Margin="10,0,0,0">
<TextBlock x:Name="textBlockSourceLabel" Text="Source" Margin="0,6,6,6" Style="{StaticResource LeftNavTextBlock}"/>
<ComboBox Height="30" x:Name="comboBoxSourceName" Margin="0,6,6,6" FontSize="14"
Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}"
ItemsSource="{Binding Codes,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SourceFile.FeedCode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Width="250">
<interactivity:Interaction.Behaviors>
<awbehaviors:ComboBoxKeyboardSelection/>
<core:EventTriggerBehavior EventName="SelectionChanged">
<core:InvokeCommandAction Command="{Binding LoadSelectedSourceCommand}" CommandParameter="{Binding SelectedValue, ElementName=comboBoxSourceName}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ComboBox>
<TextBlock x:Name="textBlockFiscalMonthLabel" Text="Calendar Month" Margin="0,6,6,6" Style="{StaticResource LeftNavTextBlock}" />
<ComboBox Height="30" x:Name="comboBoxFileFiscalMonth" FontSize="14" Margin="0,6,6,6" Width="250" ItemsSource="{Binding MonthNames}"
DisplayMemberPath="Item1" SelectedValue="{Binding SourceFile.CalendarMonth,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValuePath="Item2" Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}">
</ComboBox>
<TextBlock x:Name="textBlockFiscalYearLabel" Margin="0,6,6,6" Text="Calendar Year" Style="{StaticResource LeftNavTextBlock}"/>
<ComboBox Height="30" x:Name="comboxBoxFileFiscalYear" Margin="0,6,6,6" FontSize="14"
ItemsSource="{Binding Years,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SourceFile.CalendarYear,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}"
Width="250"></ComboBox>
XAML code for Page which includes the ListView and UserControl
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="gridLayout" VerticalAlignment="Stretch">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#FFADB9CA">
<UserControls:FeedInformation DataContext="{Binding FeedInformationVM}" HorizontalAlignment="Stretch" Margin="0" Height="{Binding ActualHeight, ElementName=Row1}" Background="{StaticResource gridcontainerBackGroundBrush}"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="90*" x:Name="GridRow"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" x:Name="GridColumn"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" x:Name="titleGrid">
<TextBlock Style="{StaticResource NewHeaderTextStyle}" Text="{Binding FeedSourceFileStatus.FileName}" Margin="10,0,0,0"/>
</Grid>
<Grid Grid.Row="1">
<ListView IsItemClickEnabled="False" IsSwipeEnabled="False" IsDoubleTapEnabled="False" IsTapEnabled="False" SelectionMode="None"
Margin="12,25,50,25" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Height="{Binding ActualHeight, ElementName=GridRow}"
ItemsSource="{Binding SubItemsCollection, ElementName=pgControl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemContainerStyle="{StaticResource LvItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<ListView SelectionMode="None" IsZoomedInView="False" IsHoldingEnabled="False" IsSwipeEnabled="False" x:Name="ListRow" Tag="{Binding RowNo}"
ItemsSource="{Binding FeedData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Stretch"
VerticalAlignment="Center" ItemContainerStyle="{StaticResource LvItemStyle}" AllowDrop="True"
ShowsScrollingPlaceholders="True" CanDragItems="{Binding RowNo, Converter={StaticResource ListInttoBooleanConverter}}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="35" Width="120" HorizontalAlignment="Center" >
<Rectangle StrokeDashArray="1 1 0.3 1" Height="30" VerticalAlignment="Top" IsHitTestVisible="False" Opacity="0.5"
Stroke="Gray" StrokeThickness="1" Margin="0" StrokeEndLineCap="Square" StrokeDashOffset="1.5"
Visibility="{Binding Tag, Converter={StaticResource RowNotoVisibilityConverter4}, ElementName=ListRow}"
Fill="#FF9DC3E6"/>
<TextBlock Text="{Binding FeedCellData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
FontSize="12" LineHeight="13" Foreground="{StaticResource TaxHubItemForegroundBrush}" TextTrimming="WordEllipsis" Width="120" AllowDrop="True" Padding="5,1,1,1" TextWrapping="NoWrap"
VerticalAlignment="Top" Tag="{Binding Tag, ElementName=ListRow}" ToolTipService.ToolTip="{Binding FeedCellData}"
Height="{Binding Tag, Converter={StaticResource RowtoHeightConverter}, RelativeSource={RelativeSource Mode=Self}}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Margin="0,0,0,0" Width="Auto" Orientation="Horizontal" Height="35" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</Grid>
</Grid>
I don't seem to figure out the reason for this canvas getting generated when combobox is clicked.
Note: This application is moved from Win 8.1 App to Win 10 UWP app. This seems to be working fine in the 8.1 app which is made compatible with win 10 but this problem is coming from using this in UWP
After debugging, I realized that this is happening because of using VirtualizingStackPanel in the outer ListView. In my ListView, every row has 200 columns. When I removed VirtualizingStackPanel, horizontal scroll bar for the whole List doesnt appear and I am not able to move horizontally. Does anybody can help with this?

how to make a listview horizontal in the Windows Phone 8.1 RT?

I am trying create a listview horizontal but my code is not working. someone know what I'm doing wrong?
I used this code to do the listview horizontal, but not work.
<Canvas Height="100" VerticalAlignment="Top" x:Name="UxCanLayoutList" Background="#DDD">
<ListView x:Name="UxLstFotos"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Width="400"
Height="100"
>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Height="100">
<Image Source="{Binding Foto}" Height="70" Width="70"></Image>
<TextBlock Text="foto tirada" FontSize="10" Foreground="#000"></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Canvas>
Try this gridview
<GridView x:Name="grdSelectShape" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.IsHorizontalRailEnabled="True" SelectionChanged="grdSelectShape_SelectionChanged" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Image Margin="5" Stretch="None" Source="{Binding}" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Try a GridView instead. Look at this question for guidance.
I believe gridview allows much finer grained control of display than does listview.
I was struggling with this also!
I created a project on my github and blogged about it in the past: http://depblog.weblogs.us/2015/03/25/show-items-scrolling-horizontally-with-listview-in-winrt/
https://github.com/Depechie/HorizontalScrollListView
In short: you need to change the ItemsPanelTemplate of the listview and adjust the ScrollViewer...

Get index of checked ChekBox in listview windows store app c#

I am developing one windows store application. There is one listview and listview contains Image , Checkbox Controls.
XAML Code:
<ListView Name="display" ItemsSource="{Binding}" SelectionMode="Single"
SelectionChanged="display_SelectionChanged"
ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"
ItemContainerStyle="{StaticResource ListViewItemStyle12}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stak2" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Path=Image}" Width="450" Tapped="image_taped" />
<CheckBox Tag="{Binding Path=tag}" Visibility="{Binding Path=visichk}" Height="40" Name="addremove"
HorizontalAlignment="Center" Checked="add_checked" Unchecked="sub_checked" Opacity="0.5"
Background="White" VerticalAlignment="Top" Template="{StaticResource CheckboxImageTemplate}" >
</CheckBox>
<TextBlock Text="{Binding Image_code}" FontSize="25" Foreground="Gray" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want to get index(Position) of checked CheckBox in add_checked event of checkbox.
how can it possible please help me.

Categories