I want to override the default transtionion of miy ListView control which is bound to an observable collection. I want to use the more fluit transitions when adding / removing items to it or setting it completely new.
What am I doing wrong?
<ListView
VerticalAlignment="Top"
ItemsSource="{Binding FilteredNewsDealsList}"
ItemTemplate="{StaticResource DealItemTemplateStretch}"
ItemContainerStyle="{StaticResource ListViewItemStyleStretch}"
Grid.Row="5" Padding="40,10,25,0"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="itemGridView_ItemClick"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<RepositionThemeTransition/>
</TransitionCollection>
</ListView.ItemContainerTransitions>
</ListView>
I have also tried to do realize the transtitions in the ItemsPanel but that doesn't work either:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal">
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<RepositionThemeTransition/>
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Thanks and best regards!
Related
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.
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.
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"
>
Can you resize grid items dynamically?
I have a gridview that has a textbox in it. They textbox has a number of bound values that can cause it to grow in size but it does not do so after the app is running.
<Slider x:Name="FontSizeSlider" Minimum="10" Maximum="120" />
<GridView ItemsSource="{Binding MyList}" >
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Height="{Binding ElementName=FontSizeSlider, Path=Value}"
Width="{Binding ElementName=FontSizeSlider, Path=Value}"
Text="{Binding}"
FontSize="{Binding ElementName=FontSizeSlider, Path=Value}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I realise that the items would have to shuffle around too so that then can fit in the columns. I don't think this is supported in gridview is it?
Is this possible?
Fixed it by adding:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>