I am able to do this using a ListView like this.
<ListView ItemsSource="..."
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.ZoomMode="Disabled"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<callistoControls:WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Title}" Command="..." CommandParameter="..." />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I don't need all the features of a ListView though. I'd rather just items an ItemsControl instead of turning off all the unwanted features in the ListView by re-doing the templates/etc.
How can I achieve this with an ItemsControl?
You can do this:
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
HorizontalScrollMode="Auto"
VerticalScrollBarVisibility="Disabled"
VerticalScrollMode="Disabled"
ZoomMode="Disabled">
<ItemsControl ItemsSource="...">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<callistoControls:WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Best of luck.
Related
how is it possible to add a button or another visual style element to only one hubsection of the default hubpage template in Windows Phone 8.1?
I would like to add a refresh button above my ListView.
<Hub x:Name="Hub" x:Uid="Hub" Header="BuLi Tweet" Foreground="White" Background="{StaticResource RasenHintergrund}">
<HubSection x:Uid="HubSection1" Header="Aktueller Spieltag" Width="400"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<ListView
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView
Margin="5,0,0,0"
ItemsSource="{Binding Items}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource MatchIcon}"
SelectionMode="None"
IsItemClickEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</ListView>
</DataTemplate>
</HubSection>
I hope you want button inside first hub section before listview. Just add grid and define RowDefinations for Grid
<HubSection x:Uid="HubSection1" Header="Aktueller Spieltag" Width="400"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="Refresh" Visibility="{Binding}"/>
<ListView Grid.Row="1"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView
Margin="5,0,0,0"
ItemsSource="{Binding Items}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource MatchIcon}"
SelectionMode="None"
IsItemClickEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</ListView>
</Grid>
</DataTemplate>
</HubSection>
I need to create a vertical scrolling list view with grouping enabled as shown below:
This is what I currently have:
<common:VariableSizeListViewWithSelection ItemsSource="{Binding Source={StaticResource cvs}}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
IsItemClickEnabled="True"
ItemTemplateSelector="{StaticResource summaryViewTemplateSelector}" >
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<TextBlock Grid.Column="0" Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" FontWeight="SemiBold" Foreground="#333333" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
<common:VariableSizeListViewWithSelection.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="LightGray" Margin="0">
<TextBlock Text='{Binding Title}' Foreground="Black" Margin="5" Style="{StaticResource HeaderTextBlockStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" Width="300" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</common:VariableSizeListViewWithSelection.GroupStyle>
</common:VariableSizeListViewWithSelection>
But this is not working as expected and it creates a listview with correct grouping but with just one column like this:
Can you please point me as to what am I doing wrong?
We took it offline for a bit and it seems like changing the ItemsPanel of the ListView to a StackPanel make this work. I have a feeling the default ItemsStackPanel should still support grouping, but perhaps not with a custom group layout panel. Maybe there is a way to reconfigure a GridView to scroll vertically and this could work too.
I have next XAML for main grid:
<ListView Grid.Row="1" x:Name="NewsListBox">
<ListView.Background>
<SolidColorBrush Color="#FF006C67" Opacity="0.5"/>
</ListView.Background>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
And it looks nice, how it is needed:
But it doesn't scroll the content!
Ok, i add ScrollViewer:
<ScrollViewer Grid.Row="1" VerticalScrollMode="Disabled" ZoomMode="Disabled">
<ListView Grid.Row="1" x:Name="NewsListBox">
<ListView.Background>
<SolidColorBrush Color="#FF006C67" Opacity="0.5"/>
</ListView.Background>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
And it stacks everything vertically:
What am i doing wrong?
Found a solution. No ScrollViewer is needed.
Just had to replace ListView with GridView because ListView isn't designed for horizontal scrolling.
You can try this
<ListView
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
>
<GridView
Grid.Row="1"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
ItemsSource="{Binding ServiceOrderList}"
ItemTemplate="{StaticResource ServiceOrderListItemTemplate}"
SelectedItem="{Binding SelectedServiceOrder, Mode=TwoWay}"
IsSwipeEnabled="false">
<winRtBehaviors:Interaction.Behaviors>
<behaviors:EventToBoundCommandBehavior
Command="{Binding ServiceOrderItemClickCommand}"
Event="Tapped" />
</winRtBehaviors:Interaction.Behaviors>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
I want use to be able to do a left click on the items of gridview but dosn't want to allow them to right click and select an item, please help.
If you don't want the items to be selectable at all, set SelectionMode="None" and IsItemClickEnabled="True" along with setting an ItemClick event.
If you want them to be selectable, but only left click, you can set IsRightClickEnabled="False".
Another way is put RightTapped event in your GridView.ItemTemplate which is implement : e.Handled = true
<GridView>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="30,10"
Width="350" Tapped="Grid_Tapped_1" RightTapped="Grid_RightTapped">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Image Height="40" Source="{Binding Path=Image}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,-3,11,0"/>
<TextBlock FontSize="24" FontWeight="SemiBold" FontFamily="Segoe WP" Foreground="#232323" Text="{Binding Path=RoomTypeString}" VerticalAlignment="Center"/>
</StackPanel>
<TextBlock FontSize="24" Text="{Binding Path=RoomCountString}"
Foreground="#232323" FontFamily="Segoe WP"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
have a semantic zoom control in an application where I've got three groups (today, tomorrow and later), but the groups don't necessarily always have at least one item. The semantic zoom control works perfect when all three groups are non-empty, but not whenever any of the items are empty. I've tried clearing out my DataTemplate to ensure it's nothing to do with the bindings, and I couldn't find an event to hook on to so that I could potentially step through what was going on when the zoom-out event is triggered.
Has anyone got this working, or have any ideas/suggestions/tips/workarounds?
some code:
XAML - collectionviewsource:
<!-- Collection of grouped items displayed by this page -->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="True"
ItemsPath="Items"
d:Source="{Binding ItemGroups, Source={d:DesignInstance Type=data:AuctionDataSource, IsDesignTimeCreatable=True}}"/>
XAML - semantic zoom control:
<SemanticZoom Visibility="Collapsed" Grid.Row="1" Name="MainSemanticZoom">
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Margin="116,0,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="Multiple"
SelectionChanged="itemGridView_SelectionChanged_1">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="200" RightTapped="Grid_RightTapped_1" Tag="{Binding}">
<Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundBrush}">
<!--bindings: Title , CurrentBid, CloseDate -->
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Height="20" Style="{StaticResource TitleTextStyle}" Margin="15,0,15,0"/>
<TextBlock Text="{Binding CurrentBid, Converter={StaticResource FormatStringConverter}, ConverterParameter='\{0:C}'}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,0"/>
<TextBlock Text="{Binding CloseDate, Converter={StaticResource FriendlyTimeConverter}}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
<Border Visibility="{Binding IsLeading, Converter={StaticResource BooleanToVisibilityConverter}}" Name="leadingBlock" Background="CadetBlue">
<TextBlock Text="leading" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
<Border Visibility="{Binding IsOutbid,Converter={StaticResource BooleanToVisibilityConverter}}" Name="outbidBlock" Background="Orange">
<TextBlock Text="outbid" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
<Border Visibility="{Binding NoBids,Converter={StaticResource BooleanToVisibilityConverter}}" Name="noBidsBlock" Background="Gray">
<TextBlock Text="you have not placed a bid" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="5,0,30,10">
<!--<Button
AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}"/>-->
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextStyle}"></TextBlock>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView
x:Name="itemZoomOutGridView"
AutomationProperties.AutomationId="ItemZoomOutGridView"
AutomationProperties.Name="Grouped Items"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left">
<Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
<Image Height="750" Source="{Binding Group.Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Height="140" Width="400" Background="Orange" VerticalAlignment="Center">
<TextBlock Margin="15" Text="{Binding Group.Title}" Foreground="White" Style="{StaticResource HeaderTextStyle}"></TextBlock>
<TextBlock Margin="15" Grid.Row="1" Text="{Binding Group.Items.Count}" Foreground="White" Style="{StaticResource HeaderTextStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Margin="230,0,0,0" Width="2000" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
I "solved" this by handling the ViewChangeStarted and the ViewChangeCompleted events of the SemanticView control. In the ViewChangeStarted event I added a new item, so that group won't be empty, and in the ViewChangedCompleted event I removed it. It's not a fix, just a workaround, but it does the job.
I don't think this is SemanticZoom issue. We reported very similar issue with GridView with grouped source. If any of the groups were empty we got exception. In fact CollectionViewSource is the likely culprit in this.
Our solution was not to use GridView with grouping. You can configure ItemsControl to look just like grouped GridView. The only downside to this is that you can't select items from different groups at the same time, but for us it was not an issue, since we didn't need selection.