I am unable to work out how to provide space for a nested ScrollViewer control.
I have a Border with nested ScrollViewer which contains ListView templated to render multiple DevExpress GridControl controls.
I've tried adding padding, margins etc nothing seems to work.
This Grid is there to allow me to add multiple StackPanel as they are made visible at different points. I've trimmed out the code for conciseness.
<Border BorderThickness="4" Grid.Column="0" Grid.Row="2">
<ScrollViewer VerticalScrollBarVisibility="Auto" Width="450" MinHeight="200" MaxHeight="600">
<Grid>
<StackPanel HorizontalAlignment="Center">
<ListView ItemsSource="{Binding FilterItemLists}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" view:MarginSetter.Margin="5">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"></WrapPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="200">
<dxlc:LayoutItem VerticalAlignment="Stretch" Padding="4">
<Label Content="{Binding Title}"/>
</dxlc:LayoutItem>
<dxlc:LayoutItem VerticalAlignment="Stretch" Padding="4" Height="200" >
<dxg:GridControl ItemsSource="{Binding Path=Items, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
AutoGenerateColumns="None" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="IsSelected" Width="20" FixedWidth="True" Fixed="Left">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<dxe:CheckEdit MaxWidth="20" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=DataContext.RowData.Row.IsSelected, Mode=TwoWay}"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type dxg:GridControl}}, Path=DataContext.FilterItemSelectedCommand}"
CommandParameter="{Binding Path=RowData.Row}"
HorizontalAlignment="Center" VerticalAlignment="Center">
</dxe:CheckEdit>
</DataTemplate>
</dxg:GridColumn.CellTemplate>
</dxg:GridColumn>
<dxg:GridColumn FieldName="Name" BestFitMode="AllRows"/>
</dxg:GridControl.Columns>
<dxg:GridControl.View>
<dxg:TableView AllowEditing="False" AutoWidth="True" ShowBandsInCustomizationForm="False" ShowBandsPanel="False"
ShowColumnHeaders="False" ShowGroupPanel="False" ShowIndicator="False" ShowSearchPanelCloseButton="False"
ShowVerticalLines="False" ShowHorizontalLines="False"/>
</dxg:GridControl.View>
</dxg:GridControl>
</dxlc:LayoutItem>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>
</ScrollViewer>
</Border>
Related
I want to insert this template into a ListView and have the scrollbar apear when I overflow my MaxHeight.
I dont know if it's the ControlTemplate or the DataTemplate or whatever.
DataBinding works though.
I would realy appreciate hints and help
<ListView Grid.Row="8"
Grid.Column="2"
Margin="5,5,5,5"
HorizontalContentAlignment="Stretch"
MaxHeight="110"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="auto"
ItemsSource="{Binding Linie_Erholungsweg_Typen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.Template>
<ControlTemplate>
<Border
CornerRadius="4"
BorderThickness="1"
BorderBrush="#333333"
Background="White"
>
<ItemsPresenter></ItemsPresenter>
</Border>
</ControlTemplate>
</ListView.Template>
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Text="{Binding Typ}" FontWeight="Bold" />
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
A solution could be adding a ScrollViewer to your ListView Template:
<ListView.Template>
<ControlTemplate>
<Border CornerRadius="4" BorderThickness="1" BorderBrush="#333333" Background="White">
<ScrollViewer>
<ItemsPresenter></ItemsPresenter>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListView.Template>
If you have StackPanel wrapping your listView. Like in this example.
It will not work! Just change it to Grid, for example, and than it will work.
<StackPanel>
<ListView Grid.Row="1" ItemsSource="{Binding Path=DictationVMs}" ScrollViewer.VerticalScrollBarVisibility="Visible"
Focusable="True" SelectedValue="{Binding Path=SelectedDictation,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}">
<ListView.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter VerticalAlignment="Stretch"></ItemsPresenter>
</ScrollViewer>
</ControlTemplate>
</ListView.Template>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DictationModel.Name}" HorizontalAlignment="Center"
VerticalAlignment="Center" FontSize="24" TextWrapping="Wrap"/>
</DataTemplate>
</ListView.ItemTemplate>
</StackPanel>
You need to add a "ScrollViewer" as a parent of the objects you want to scroll, try this:
<DataTemplate>
<ScrollViewer>
<WrapPanel>
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Text="{Binding Typ}" FontWeight="Bold" />
</WrapPanel>
</ScrollViewer>
</DataTemplate>
I wrote the below code in my page:
<StackPanel HorizontalAlignment="Left" Height="166" Margin="10,602,0,0" VerticalAlignment="Top" Width="1346" x:Name="thumbnailViewer">
<ScrollViewer
x:Name="thumbnailViewerScroller"
Padding="0"
BorderThickness="0"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal" >
<ItemsControl x:Name="UserList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--<StackPanel Orientation="Horizontal">-->
<Image Source="{Binding imageurl}" Tag="{Binding Path=id}" Width="164" Height="150" Margin="4" Stretch="Fill"></Image>
<!--</StackPanel>-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</StackPanel>
Inside of the scrollviewer i mentionsed stackpanel and aligning the items as horizontal.But always i am getting the items alignment as vertical while running of the code.Please tell me how to align the items as horizontal?What was wrong in my code why items are aliging to vertical even i mentionsed Orientation="Horizontal in stackpanel.
EDIT:
<ScrollViewer
x:Name="thumbnailViewerScroller"
Padding="0"
BorderThickness="0"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden">
<!--<StackPanel Orientation="Horizontal" >-->
<ItemsControl x:Name="UserList">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--<DataTemplate>-->
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imageurl}" Tag="{Binding Path=id}" Width="164" Height="150" Margin="4" Stretch="Fill"></Image>
</StackPanel>
<!--</DataTemplate>-->
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Scrollviewer>
</Stackpanel>
Use the ItemsPanel of the ItemsControl instead.
<ScrollViewer>
<ItemsControl ...>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding imageurl}"
Tag="{Binding Path=id}" Width="164" Height="150"
Margin="4" Stretch="Fill"></Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I have an ItemsControl for which the ItemsSource is Binded. i coded it as per the below so that it would add the UserControl (showing the different items) to a StackPanel with a horizontal orientation that then contains a wrappanel to wrap the items inside but it is not working. All of the items are showing but they are all on one line and do not wrap to a new line when needed.
How can this code be fixed to include wrapping?
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto"
Grid.Column="0" Grid.Row="1">
<ItemsControl x:Name="tStack"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1"
ItemsSource="{Binding Items.View}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel x:Name="stckPnl" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<WrapPanel>
<Viewbox HorizontalAlignment="Left" Height="400">
<Controls1:MyItemsUserControl Padding="5"/>
</Viewbox>
</WrapPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I have solved this issue by setting Width for WrapPanel. In below snippet i have binded WrapPanel width to its Parent Grid control named MainGrid and Path to its ActualWidth. Please see below snippet will helps you sometimes to solve your issue
<ItemsControl Name="ThemesItemControl"
Grid.Column="1"
Grid.Row="1"
ItemsSource="{Binding InstalledCollection}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0.5">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
VerticalAlignment="Top"
Width="{Binding ElementName=MainGrid, Path=ActualWidth}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button Width="210"
Height="260"
Margin="20"
Tag="{Binding ID}"
Command="{Binding DataContext.ThemeSelectCommand,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}}}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}}">
<StackPanel>
<Image Source="{Binding TileImage}"/>
</StackPanel>
</Button>
<TextBlock Text="{Binding Title}"
FontWeight="ExtraBold"
HorizontalAlignment="Center"
FontSize="15"
FontFamily="Segoe Print"
Foreground="Red"/>
<TextBlock Text="{Binding Description}"
HorizontalAlignment="Center"
FontSize="13"
FontFamily="Segoe Print"
Foreground="Red"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have the following code:
<Window.Resources>
<DataTemplate x:Key="ParameterItemTemplate">
<my:ParameterItem ParamValue="{Binding Value}" Description="{Binding Name}"/>
</DataTemplate>
</Window.Resources>
<Grid Width="Auto">
<GroupBox BorderBrush="Black"
BorderThickness="2"
Width="Auto"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Button Content="Header"
Width="{Binding RelativeSource={RelativeSource Self}, Path=Width}"
Height="30">
</Button>
</DataTemplate>
</GroupBox.HeaderTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="Test"
ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource ParameterItemTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" Height="228"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</GroupBox>
</Grid>
When the binded items fill my ItemsControl, the Button placed in the Header of the GroupBox does not change it's width. Do I have a binding problem?
The width of the button fits only it's content.
What do you expect if you bind the width with itself? Try
<Button Content="Header"
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type GroupBox}}, Path=ActualWidth}"
Height="30">
I have a ListView which layout looks like a Windows Explorer view (icon + some details), bound to a list somewhere in the ViewModel.
My aim here is to be able to switch between explorer view or classic view whenever we want.
I could define an ItemsPanelTemplate doing exactly the work to display correctly the layout, directly in the ListView.ItemsPanel field. Now, I'd like to define it in the resources so that I'll be able to use it in different views, and especially in one control, the user should have the choice between Explorer view or classic list view (the default rendering for a list)
How'd you do that? I cannot define any ItemsPanelTemplate in my ResourceDictionary, and if I define a DataTemplate it is not compatible (while I thought that following pure logic, ItemsPanelTemplate should inherit from DataTemplate, but it actually doesn't look like so).
Code snippet for the actual list:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel
Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource
AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}"
/>
<!--
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
-->
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Height="Auto"
Width="150" >
<Image
Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}"
Margin="5"
Height="50"
Width="50" />
<StackPanel
VerticalAlignment="Center"
Width="90" >
<TextBlock
Text="{Binding Path=Appli.AppName}"
FontSize="13"
HorizontalAlignment="Left"
TextWrapping="WrapWithOverflow"
Margin="0,0,0,1" />
<TextBlock
Text="{Binding Path=Appli.AppType}"
FontSize="9"
HorizontalAlignment="Left"
Margin="0,0,0,1" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
Keeping the ItemTemplate in a static resource was easy to do, but now I can't do anything with the ItemsPanelTemplate...
Any ideas? I'm using MVVM so I'm trying ideally not to use code-behind if possible
You would use a style for the whole ListView for that. So you would do:
<Grid.Resources>
<Style x:Key="ListViewStyle" TargetType="ListView">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel
Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
<!--
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
-->
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ListView
SelectionMode="Single"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Bottom"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding ListUserApps, UpdateSourceTrigger=PropertyChanged}"
SelectedIndex="{Binding SelectedUserApp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Background="White"
Style="{StaticResource ListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Height="Auto"
Width="150">
<Image
Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}"
Margin="5"
Height="50"
Width="50"/>
<StackPanel
VerticalAlignment="Center"
Width="90">
<TextBlock
Text="{Binding Path=Appli.AppName}"
FontSize="13"
HorizontalAlignment="Left"
TextWrapping="WrapWithOverflow"
Margin="0,0,0,1" />
<TextBlock
Text="{Binding Path=Appli.AppType}"
FontSize="9"
HorizontalAlignment="Left"
Margin="0,0,0,1" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
If you want the user then be able to switch between explorer and classic view, just define a second Style and switch the style of the listview. This can be done for example with some VisualStates and a 'DataStateBehavior'.
Alternatively you could create a style with some DataTriggers and Setters for the individual ItemsPanels.