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.
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!
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?
This problem bothre me so long. In the Page,I use a listbox to show a listdata ,and the item datatemplate is
<DataTemplate x:Key="PostItem">
<Grid Width="460" Margin="0,2,0,2">
<control:RichTextControl Segments="{Binding ListSegment, Mode=TwoWay}" FontSize="25">
<control:RichTextControl.Template>
<ControlTemplate TargetType="control:RichTextControl">
<StackPanel Name="RootStackPanel" CacheMode="BitmapCache" Background="{StaticResource BlockBackground}" />
</ControlTemplate>
</control:RichTextControl.Template>
</control:RichTextControl>
</Grid>
</DataTemplate>
And the stackpanel RootStackPanel is a usercontrol,i add a mount of textblock in it.when the amont is too large,it can show the Backgruond as you see: when the item is too high to display the bacground.while the short item can display as i except.
You need to set the attribute horizontal alignment to stretch like this:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
I've been asked to create a new control for a feature that we need, I'm really struggling on how to best achieve this in a generic and flexible way.
basically the control is very similar to a tree view, where as you would click on a node and then its children would then appear underneath that node.
for this control, they want it like this - when you click on a node, its children are then displayed on the left of parents container and so on.
I've done a quick (super quick) diagram in paint... (please don't laugh, its terrible! :) )
So you should just start with a single list of items and then progressive through the children of the selected item..
so my question is really, where do you start on something like this.. ? I'm fine with the data side but the XAML is the bit that's really confusing me, it needs to be very generic so it could potential cope with 100's of children panels
any help would be brilliant.
cheers.
ste.
If you are after a usercontrol and known bindings at designtime - it would be easy, but as a custom control - i'm very interested in good answers
like i said this can easy be done if you know the collection bindings and the childlevel. but its maybe a start to get a custom control.
<UserControl>
<UserControl.Resources>
<Style x:Key="{x:Type ListBox}" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate DataType="{x:Type local:TreeItems}">
<Grid VerticalAlignment="Stretch">
<Border BorderBrush="Black" BorderThickness="1" >
<TextBlock Margin="5" Text="{Binding Name}"/>
</Border>
</Grid>
</DataTemplate>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
<ListBox x:Name="root" ItemsSource="{Binding}"></ListBox>
<ListBox x:Name="Lvl1" ItemsSource="{Binding ElementName=root, Path=SelectedItem.Childs}" />
<ListBox x:Name="Lvl2" ItemsSource="{Binding ElementName=Lvl1, Path=SelectedItem.Childs}" />
</StackPanel>
</UserControl>
This article from Josh Smith is a good starting point.
If all you need is a hierarchical data control, you better use a TreeView and not rolling your own control, as it is probably more complicated than you think (selection, keyboard navigation, etc.)
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>