I have a view Model that is bind with ItemsControl. Inside that ItemsControl I have a stack panel. Now What I want is that selected item can be changed with arrow keys. Like in the attached picture I have 1st item selected and when I press down 4th item should be selected. The problem is that Items per row depends on screen resolution so On some screen there are 4 items per row and in some there are three. Secondly when I move down to the point where the page ends scroll should move down. How can I achieve this?.
Here is my xaml:
<ScrollViewer HorizontalAlignment="Center" VerticalScrollBarVisibility="Auto" Width="Auto" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2" VerticalAlignment="Top" Margin="0,10,10,0">
<ItemsControl Name="productVariants">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel MouseLeftButtonDown="ProductVariantClicked" Tag="{Binding VariantCBX}" Margin="8" MaxHeight="160" MaxWidth="200" MinWidth="200" MinHeight="160">
<Border Name="ItemBorder" CornerRadius="6" BorderBrush="Gray" Background="White" BorderThickness="2" DockPanel.Dock="Top">
<StackPanel Margin="0">
<TextBlock Name="ProductVariantOption" Text="{Binding VariantOption}" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20"/>
<Image Source="{Binding ProductVariantLogoPath}" Height="80" Width="180" />
<TextBlock Text="{Binding VendorName}" HorizontalAlignment="Center" FontSize="15" FontWeight="Bold" />
<TextBlock Text="{Binding SellingPrice}" HorizontalAlignment="Center" FontSize="20" FontWeight="Bold" Foreground="Red" />
</StackPanel>
</Border>
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True" >
<Setter TargetName="ItemBorder" Property="BorderBrush" Value="Yellow"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Like I said, I'm not aware of any clean way to do it. I might start by looking at the ActualWidth of your items (e.g. your "ItemBorder" Border element). If you know the ActualWidth of your item (plus any Horizontal Margin), and the ActualWidth of your ItemsControl, you can figure out how many elements are in one row at that moment. You would need to re-calculate this on-demand -- you could either recalculate this when a scroll is performed (because the sizes may have changed), or you could keep it up-to-date by re-calculating on layout change.
To find the ActualWidths, you have a couple of options. One is you could traverse through the visual descendants at scroll-time until you find the element that you care about. Another is you could subscribe to a"Loaded" event on and remember the actual width at that time, assuming that the widths don't change over time.
Related
So, I've been working on a legend for our map using a WPF treeview to display the groups and layers.
I've gotten it working and displaying just fine, but when I scroll the treeview with the mousewheel, the control starts flickering and the vertical scrollbar for the tree keeps resizing up and down.
The treeview layout is like this:
Group
Layer
Layer sub items
Layer
Layer sub items
Layer
Layer sub items
Group
Layer
etc...
The Group and Layer nodes are tree view items, but the layer sub items are contained within an items control. The layer sub items are not meant to be expanded/contracted, or selected and thus must remain static under the layer node, thus the items control seemed like a sensible choice.
When I scroll with the mouse wheel all the way to the top or bottom of the tree view, the scrollbar starts flicking and resizing, the last few elements of the items control flickers in and out of view (when it shouldn't be in view at all), and sometimes, the tree view will actually scroll back and forth.
If I remove the items control, everything works as it's supposed to. And when I add it back in, it messes up.
Also, if I grab the scroller thumb with the mouse and drag it, everything works fine. No jumping around.
Here's the resource XAML for the control:
<views:DynamicLegendNodeTemplateSelector x:Key="LegendTemplateSelector">
<views:DynamicLegendNodeTemplateSelector.GroupTemplate>
<HierarchicalDataTemplate DataType="{x:Type legend:IDynamicMapLegendGroup}">
<HierarchicalDataTemplate.ItemsSource>
<MultiBinding Converter="{StaticResource LegendNode}">
<Binding Path="Groups"/>
<Binding Path="LegendLayers"/>
</MultiBinding>
</HierarchicalDataTemplate.ItemsSource>
<Grid>
<StackPanel Orientation="Horizontal">
<CheckBox Focusable="False" IsChecked="{Binding IsVisible}" VerticalAlignment="Center">
<TextBlock Text="{Binding DisplayName}" VerticalAlignment="Center"/>
</CheckBox>
</StackPanel>
</Grid>
</HierarchicalDataTemplate>
</views:DynamicLegendNodeTemplateSelector.GroupTemplate>
<views:DynamicLegendNodeTemplateSelector.LayerTemplate>
<HierarchicalDataTemplate DataType="{x:Type legend:IDynamicMapLayerLegendItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<CheckBox Grid.Row="0" Focusable="False" IsChecked="{Binding IsVisible}" VerticalAlignment="Center">
<TextBlock Text="{Binding LayerCaption}" VerticalAlignment="Center"/>
</CheckBox>
<ItemsControl Grid.Row="1"
Margin="16,0,0,0"
BorderThickness="0"
Background="Transparent"
ItemsSource="{Binding LegendItems, IsAsync=True}"
HorizontalAlignment="Left"
HorizontalContentAlignment="Left"
MouseWheel="ItemControls_MouseWheel"
ScrollViewer.CanContentScroll="False"
MouseUp="ItemsControl_MouseUp">
<ItemsControl.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="20" Height="20" Stretch="UniformToFill" Source="{Binding Symbol}"/>
<Label Grid.Column="1" Content="{Binding Label}"/>
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</HierarchicalDataTemplate>
</views:DynamicLegendNodeTemplateSelector.LayerTemplate>
</views:DynamicLegendNodeTemplateSelector>
<Style x:Key="TreeItemStyle" TargetType="TreeViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<EventSetter Event="MouseUp" Handler="TreeViewItem_MouseUp"></EventSetter>
</Style>
And here's the treeview:
<TreeView x:Name="LegendHierarchy"
MinWidth="200"
ItemsSource="{Binding LegendItems, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:DynamicArcGisRuntimeMapLegendView}}}"
ItemContainerStyle="{StaticResource TreeItemStyle}"
ItemTemplateSelector="{StaticResource LegendTemplateSelector}" />
This code is using .NET 4.5 in Visual Studio 2015 if that matters.
Regardless, does anyone know what might be causing the problem?
Thanks
So, it goes to show that an attempt at a good nights sleep is helpful.
Apparently, all I had to do was set
VirtualizingPanel.VirtualizationMode="Recycling"
On the treeview control and it starting working.
Here's the full tree view XAML:
<TreeView x:Name="LegendHierarchy"
MinWidth="200"
ItemsSource="{Binding LegendItems, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:DynamicArcGisRuntimeMapLegendView}}}"
ItemContainerStyle="{StaticResource TreeItemStyle}"
ItemTemplateSelector="{StaticResource LegendTemplateSelector}" UseLayoutRounding="True" ScrollViewer.CanContentScroll="True" HorizontalContentAlignment="Stretch"
VirtualizingPanel.VirtualizationMode="Recycling"/>
I hope this helps others.
I have a situation where I want to see a queue of items related to another list. I want to arrange the parent items vertically and the child items horizontally. So Far I have the following:
Parent:
<ListBox x:Name="listResources" ItemsSource="{Binding Resources}" >
<ListBox.ItemTemplate>
<DataTemplate>
<local:ResourceControl x:Name="resources" thisResource="{Binding Path=.}" Margin="2"></local:ResourceControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My Child items:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel
Orientation="Horizontal"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="3">
</StackPanel>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<TextBlock FontSize="20" x:Name="labelResourceName" Text="{Binding ResourceName}"></TextBlock>
</StackPanel>
<ListBox Grid.Column="1" x:Name="listOperations" ItemsSource="{Binding Operations}" >
<ListBox.ItemTemplate>
<DataTemplate>
<local:OperationControl x:Name="operations" thisOperation="{Binding Path=.}" Margin="2" ></local:OperationControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
This works relatively well and gives me my child items listed horizontally as I want them to be. The problem is that I need to be able to scroll the child items individually. As it is written currently I have the ability to scroll horizontally, but all of the child items scroll together.
I have attempted to wrap the parent listbox inside a but that did not seem to do it either.
How can I get the items inside of the listbox to scroll individually instead of all together as a group?
I found the answer to this issue. The problem was that I had not defined a width for the listboxes. Once I added widths to the controls the scrolling worked properly.
I'm currently working on a data driven editing tool that was written in WPF using MVVM. The primary display is a scrollable list of view models, some (not all) of which have inner lists of their own child view models (not scrollable). The problem is that one of the view model types is an array type that includes functionality to add a new child item and we want to make it so that if you use that, it then scrolls the overall list to that new item. Is there a reasonable way to do this using MVVM?
To give you an idea of how this UI is currently set up, this is the overall display:
<Grid ScrollViewer.VerticalScrollBarVisibility="Auto">
<Label Content="{Binding Path=DisplayName}" Height="28" HorizontalAlignment="Left" Margin="4,4,0,0" VerticalAlignment="Top" />
<ItemsControl IsTabStop="False" ItemsSource="{Binding Path=VMEntries}" Margin="12,25,12,12" ItemTemplateSelector="{StaticResource EntryTemplateSelector}" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer x:Name="ScrollViewer">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</Grid>
and this is the data template for the array entry that we're working with:
<DataTemplate x:Key="Array">
<Grid Margin="2,7,0,0">
<Label Content="{Binding Path=DisplayName}" ToolTip="{Binding Path=Tooltip}"/>
<Button Content="Add" HorizontalAlignment="Right" VerticalAlignment="Top" Height="24" Width="24" Command="{Binding Path=AddCommand}"/>
<ItemsControl HorizontalAlignment="Stretch" IsTabStop="False" ItemsSource="{Binding Path=SubEntries, NotifyOnSourceUpdated=True}" Margin="10,24,0,0" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Name="RemoveButton" Grid.Column="0" Margin="0,5,0,0" Content="Del" HorizontalAlignment="Right" VerticalAlignment="Top" Height="24" Width="24" Command="{Binding Path=RemoveCommand}" CommandParameter="{Binding Path=.}"/>
<ContentControl Grid.Column="1" Content="{Binding Path=.}" ContentTemplateSelector="{StaticResource EntryTemplateSelector}" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=RemoveHandler}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="RemoveButton" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>
The MVVM ideal is not adding code behind, but for some complicated things the easier way is to add it. For several cases if you want add complicated behaviors on your application and keeping the MVVM, an alternative is use the Behaviors (c# codes that allows be used and binds from XAML). Also you could define behaviors using AttachedProperties and register to the PropertyChanged event. And another alternative is to create a UserControl and add the code behind to it.
In your particular case, the inner collection must raise some event when add items to it, and then in your outer collection execute something like this list.ScrollIntoView(itemToScroll);. Hope this could give some tips to go on.
I'm trying to achieve a ToggleButton control template for listbox items. This is to be used in an application where the user can click on the listbox items to show a certain piece of functionality.
The listbox item template is defined as follows:
<Style x:Key="ExampleListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ToggleButton IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">
<StackPanel Orientation="Vertical">
<TextBlock x:Name="ExampleTitle" Grid.Row="0" Foreground="#333333"
FontFamily="pack://application:,,,/Resources/Fonts/#Neuropol Regular"
FontSize="16" Height="26" TextAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Top" Text="{Binding ExampleDisplayName}"
Margin="5"></TextBlock>
<TextBlock Grid.Row="1" Foreground="#333333" Margin="5,-5,5,3" HorizontalAlignment="Stretch"
TextAlignment="Left" FontFamily="Verdana" VerticalAlignment="Top"
TextWrapping="Wrap" Text="{Binding ExampleDescription}"/>
</StackPanel>
</ToggleButton>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the listbox is defined as
<ListBox x:Name="_examplesListBox"
SelectionMode="Single"
BorderBrush="Transparent"
Background="Transparent"
ItemsSource="{Binding AllExamples}"
ItemContainerStyle="{StaticResource ExampleListBoxItemStyle}"
SelectedItem="{Binding SelectedExample, Mode=TwoWay}"/>
Here I have two textblocks, one bound to ExampleDisplayName, the other bound to ExampleDescription. The effect I am trying to achieve is to get the second textblock (description) to wrap around, constrained by the available space.
This is what I'm getting now:
What I'd like is for the second line showing example description to wrap based on the size of the listbox. When the application starts the listbox should auto-size to the first line + margin.
Any suggestions?
Removing that horizontal scrollbar should help with text wrapping:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
I'm not quite sure how to auto-size ListBox on startup based on first text line size using only XAML.
I have a listbox inside of a stack panel inside of a border in a silverlight application and when ever I add anything to the listbox it increases in height so the scrollbar is never used and it extends beyond the boundaries of the border element. I have tried explicitly setting the height attribute of the listbox, the border and the stack panel and it still goes beyond this.
Here is my code:
<Border x:Name="articlePane">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Latest" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Pending" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Done" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
</StackPanel>
<ListBox x:Name="articleList" Margin="5" Background="Transparent" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image x:Name="articleImage" />
<TextBlock x:Name="articleTitle" Text="{Binding Path=Title}" FontSize="18" FontWeight="Bold"
Margin="5"/>
<TextBlock x:Name="articleDate" Text="{Binding Path=Date}" FontSize="14" Foreground="Gray"
Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
I have a feeling that the StackPanel just keeps on adding height forever. I think in this instance you'd be better off with a Grid layout within your Border. Put the Button StackPanel in one height defined row, and the ListBox in an autosizing * height row. This way Grid will stick within the confines of your form.