I want to archive a vertical ListView that contains a UserControl in which i have some infos on the left and a second ListView that will scroll horizontal.
The problem is that my second listview will not start to scroll. It seems to pick unlimited space.
First of all some more infos about my setup:
My window is arranged via a grid basically just a row on top with text and the first listview in the second row.
The first listview uses a ItemTamplate like the following:
<ListView.ItemTemplate>
<DataTemplate>
<controls:MyControl />
</DataTemplate>
</ListView.ItemTemplate>
Beside that it has a ItemContainerStyle to display a horizontal line between the items:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem"
BasedOn="{StaticResource {x:Type ListViewItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<StackPanel>
<Rectangle x:Name="Separator"
Height="2"
SnapsToDevicePixels="True"
Fill="{DynamicResource AccentColorBrush}" />
<ContentPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
(trigger that disables the unnecessary first line omitted)
MyControl is a UserControl which is also just a grid first column some text and second column is my second listview.
This one is special because it is horizontal. Since their are various approaches for this from arround the internet i will show the one i ended using with.
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"
IsItemsHost="True"
IsVirtualizing="True"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Item template is again a UserControl (at the moment just a TextBlock) and again the separator lines but this time vertically.
The problem is now that the second ListView is not scrollable. Even if i explicit set them to be visible they are disabled (also after resizing window).
My approach solving this was binding MaxWidth of Stackpanel in ListViewItem Template to Actual with of my MetroWindow.
MaxWidth="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type metroControls:MetroWindow}}}"
But this and some other tries binding different sizes of different items does not work.
Can somebody give a hint to resolve this?
Related
So, I have a grid, containing 3 columns. 2 one is gridsplitter which is working fine.
In the first one I have a ListView
<ListView Grid.Row="1"
ItemsSource="{Binding Chats}"
Background="Transparent"
BorderThickness="0"
ItemContainerStyle="{StaticResource ContactItem}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
Then there is Style: ContactItem
<Style TargetType="{x:Type ListViewItem}" x:Key="ContactItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<l:RippleEffectDecorator Background="Black" HighlightBackground="White">
<Border Height="62" Background="Transparent" BorderThickness="0">
</Border>
</l:RippleEffectDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see there is RippleEffectDecorator - which is ContentControl(I've found it in another case). There is link on github to it: Xaml file
And Cs file
So, starting the project I have:this
When I try to drag gridsplitter I have: this
I've already tried to put HorizontalAlignment and/or HorizontalContentAlignment Stretch to ListView/to ListViewItem style/to RippleEffectDecorator style.
Not problem about anything inside RippleEffectDecorator cuz when I was writing it without this contentcontrol it was working fine.
All I need is just everything inside this RippleEffectDecorator to be able to stretch horizontally when I'm moving gridsplitter, thank you!
Scenario:
I am working on a Store App in WinRT/Win8.
I have a ScrollView, with a custom UserControl child inside - all as part of one "main" UserControl.
When the main UserControl (with the ScrollView -> child UserControl) in is Initialized/navigated to - even with the App width not full-screen; the UserControl is at the full width of the ScrollView - as desired. Images below:
Image 1 - main User Control Opens with Window Fullscreen
Image 2 - main User Control Opens Starts Half-Width (or any width)
The ScrollView itself is within a Grid and keeps with the full width of the App window, even when it's resized - as desired.
Issue:
The issue I'm having is that when I resize the App window horizontally, the child UserControl does not keep the same width as its parent ScrollView's.
This causes the ScrollView to then have Horizontal Scrollbars - which I do not want.
Image 3 - Window Horizontal Width Resized
I want to keep the width of the child to be bound inside the width of the ScrollView with no Horizontal Scrollbars (as in Image 2).
Markup is similar to this (I have stripped down for readability):
<Grid>
<!-- Some row/column definitions in here -->
...
<!-- A header TextBlock -->
...
<ScrollViewer x:Name="scrlTableRows" Grid.ColumnSpan="3" Grid.Row="1"
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
Padding="66,0,66,40" ZoomMode="Disabled">
<local:MyCustomUserControl Margin="0,10,0,10" HorizontalAlignment="Stretch" />
</ScrollViewer>
...
<!-- Just a button here-->
</Grid>
I have already tried setting (on the child custom UserControl):
Width="{Binding Path=ActualWidth, ElementName=scrlTableRows}"
The child is not set at the full width of the ScrollView to start with (which is what I need), and doesn't resize the width with its parent either - giving me scrollbars
Width="{Binding Path=Width, ElementName=scrlTableRows}" The child does start at the full width of the parent, but doesn't resize - giving me scrollbars
I have also tried placing the UserControl inside a Grid (within the ScrollView), amongst many other HorizontalAligment and Width properties.
All to no avail.
No other similar situations/answers have worked from other helpful fellows at StackOverflow.
Obviously, I need the vertical scrollbars - as is kind of evident; before anyone asks.
Can anybody give me any pointers, please?
Update:
Here is the custom UserControl's Xaml, as requested by #LovetoCode:
<UserControl *usual user control declaritive stuff in here*>
<UserControl.Resources>
<CollectionViewSource x:Key="FieldViewModelsSource" Source="{Binding ItemToEdit.FieldViewModels}"/>
<datatemplateselectors:FieldViewModelDataTemplateSelector
x:Key="FieldViewModelDataTemplateSelector"
AudioFieldTemplate="{StaticResource TableRowAudioFieldDataTemplate}"
CheckboxFieldTemplate="{StaticResource TableRowCheckboxFieldDataTemplate}"
DatasetFieldTemplate="{StaticResource TableRowDatasetFieldDataTemplate}"
DateFieldTemplate="{StaticResource TableRowDateFieldDataTemplate}"
DateTimeFieldTemplate="{StaticResource TableRowDateTimeFieldDataTemplate}"
DropdownFieldTemplate="{StaticResource TableRowDropdownFieldDataTemplate}"
FileFieldTemplate="{StaticResource TableRowFileFieldDataTemplate}"
GpsFieldTemplate="{StaticResource TableRowGpsFieldDataTemplate}"
GridFieldTemplate="{StaticResource TableRowGridFieldDataTemplate}"
ImageFieldTemplate="{StaticResource TableRowImageFieldDataTemplate}"
LabelFieldTemplate="{StaticResource TableRowLabelFieldDataTemplate}"
MultichoiceCheckboxFieldTemplate="{StaticResource TableRowMultichoiceCheckboxFieldDataTemplate}"
RadioFieldTemplate="{StaticResource TableRowRadioFieldDataTemplate}"
RangeSliderFieldTemplate="{StaticResource TableRowRangeSliderFieldDataTemplate}"
SignatureFieldTemplate="{StaticResource TableRowSignatureFieldDataTemplate}"
SplitterFieldTemplate="{StaticResource TableRowSplitterFieldDataTemplate}"
TextFieldTemplate="{StaticResource TableRowTextFieldDataTemplate}"
TextareaFieldTemplate="{StaticResource TableRowTextareaFieldDataTemplate}"
TimeFieldTemplate="{StaticResource TableRowTimeFieldDataTemplate}"
VideoFieldTemplate="{StaticResource TableRowVideoFieldDataTemplate}"/>
</UserControl.Resources>
<Grid>
<ItemsControl ItemsSource="{Binding Source={StaticResource FieldViewModelsSource}}"
ItemTemplateSelector="{StaticResource FieldViewModelDataTemplateSelector}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Margin="10,0,10,0" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</UserControl>
Note that the DataTemplate resources in the UserControl resources are custom UserControls that are loaded in based on objects in the ViewModel (like in my original image 1).
So, with great thanks to #LovetoCode, I managed to remedy my issue. Still trying to get over my 2-day headache and bruises from banging my head against the desk, though.
I ditched the ScrollViewer and just used my custom UserControl:
<local:TableRowUserControl Grid.Row="1" Grid.ColumnSpan="2"
Margin="66,0,66,40" HorizontalContentAlignment="Stretch" />
Then, as #LovetoCode suggested - I used a ListView instead of ItemsControl. My most sincere apologies. I didn't want to use one first time round because...
Main issue was with the ListView's default style to have hover and tap effects; which I didn't need. I tried to steer clear of disabling the hover/tap from previous experience of failing - miserably.
After a bit of Googling (other search engines are available), I found a simple solution to do this quite easily.
I managed to do it like this:
<ListView x:Name="lstFieldViewModels" ItemsSource="{Binding Source={StaticResource FieldViewModelsSource}}" SelectionMode="None"
ItemTemplateSelector="{StaticResource FieldViewModelDataTemplateSelector}" IsSwipeEnabled="False">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Margin="10,0,10,0" Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
Again, props to #LovetoCode. Gold star and programmer points for you :)
I have a ListBox which holds three different sized types of items.
The items' heights are the following:
178x100px
100x100px
100x178px
I want the layout of the items with no padding or margin between them.
But I'm getting this result:
There is a margin between items with different height/width.
What I want to do is to remove this margin between these items and have them right next to each other, but I do not know what panel to use, or what to style.
Here is the XAML for the ListBox. The items are part of a viewmodel with an enum representing the aspect ratio (16:9, 1:1, 9:16)
<ListBox x:Name="previewList">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="525" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="{Binding Path=previewSize, Converter={StaticResource sizeConverter}, ConverterParameter={StaticResource True}}"
Width="{Binding Path=previewSize, Converter={StaticResource sizeConverter}, ConverterParameter={StaticResource False}}" Background="Blue">
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding"
Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Tokfrans,
You need to remove the border on the ListViewItems.
Create a ListViewItemStyle resource ( you can right click on the Listbox/Edit Additional templates/Edit Copy)
The created XAML follows with hand modification of the BorderThickness :
EDIT : **
** Sorry the XAML solution not visible !
<Window.Resources>
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding"
Value="0"/>
<Setter Property="BorderThickness"
Value="0"/>
</Style>
</Window.Resources>
And the style is assigned to the ListBox :
<ListBox x:Name="previewList" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}">
Regards
The standard styles of the various controls often have a small (1-2 pixel) built-in Margin and/or Padding. I'm guessing that this is what you are seeing here. You can try to fix this by:
setting a zero or even negative Padding and/or Margin (you'll have to test what looks correct).
creating your own ControlTemplate, removing the built-in Margin/Padding.
I have a ListView, where the item template is another ListView, which has an item template of a TextBox. The end result of this is that I'm able to bind my collection of "rows" to the first ListView and I get a 2D grid of my data. I'm essentially trying to implement a basic spreadsheet.
My problem is that I want the TextBoxes to stretch horizontally so that they are all the same width and take up all of the available space.
I've removed all extraneous style, event handling, context menu, etc - here is the code as it is:
<ListView ItemsSource="{Binding Rows}">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding Path=RowData}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Path=Value, Mode=TwoWay}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I've tried setting HorizontalContentAlignment="Stretch" on the ItemContainerStyle of the ListView, and HorizontalAlignment="Stretch" on the TextBox itself with no luck so far. I did have this "working" by binding the width of the TextBoxes to a dependency property on the control which was updated with an attempt to calculate the correct width for all boxes, but it was rather ugly and slow.
Does anyone know how I can get this done in the XAML alone?
Don't use StackPanel, use UniformGrid instead in your ItemsPanelTemplate and set its Columns to the number of your desired number of fields in each row.
<ItemsPanelTemplate>
<UniformGrid Columns="5"/>
</ItemsPanelTemplate>
Which will:
Provides a way to arrange content in a grid where all the cells in the grid have the same size.
I'm currently building a UI that is going to be used in a touch panel. Therefore, I would like to display any RadioButton groups as horizontal rows of ToggleButtons. I already figured out how to display ToggleButtons instead of the standard bullet items:
<Style x:Key="{x:Type RadioButton}"
TargetType="{x:Type RadioButton}"
BasedOn="{StaticResource {x:Type ToggleButton}}">
However, this will show a column of ToggleButtons, not a row.
Do you know an easy way to do this?
Thanks a lot!
Put radio buttons in a StackPanel with Orientation set to Horizontal.
<StackPanel Orientation="Horizontal">
<RadioButton Content="1"/>
<RadioButton Content="2"/>
<RadioButton Content="3"/>
</StackPanel >
Figured it out: the RadioButtons are not involved in the solution - I had to modify the ItemsControl that hosted them:
<Style x:Key="myKey" TargetType="{x:Type ItemsControl}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
IsItemsHost="True"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>