We Keep Coding

WPF ContentControl in ListViewItem is not changing it's width (not stretching) while dragging gridsplitter

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!

C# WPF DataGrid Column Header fitting TextBox into width

I've a DataGrid in my C# WPF application and styled the Columns Header with a Label/TextBlock and a TextBox as an instant filter beneath of it.
My target is to fit the width of the TextBox into the width of the DataGridColumn, but I didn't found an acceptable way for me.
Currently I'm using a Viewbox, but this crashes all size measurements of the elements in the header.
Here is an example what it looks like with the Viewbox:
As you can see, I've either a too big TextBox and FontSize or a too small TextBox.
My currently code looks like that:
<DataGridTemplateColumn.Header>
<Viewbox StretchDirection="DownOnly">
<StackPanel>
<TextBlock Text="Mitarbeiter"/>
<TextBox x:Name="txtInstantSearchPersonio" HorizontalAlignment="Stretch" TextChanged="evh_InstantFilterChanged"/>
</StackPanel>
</Viewbox>
</DataGridTemplateColumn.Header>
Is there a way to fit the TextBox into full wifth of the column but don't stretch the height or fontsize?

You could use a Style for DataGridColumnHeader to fit the Textbox inside of a column
<DataGridTemplateColumn Width="200">
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.Header>
<StackPanel>
<TextBlock Text="Mitarbeiter"/>
<TextBox x:Name="txtInstantSearchPersonio" HorizontalAlignment="Stretch" TextChanged="evh_InstantFilterChanged"/>
</StackPanel>
</DataGridTemplateColumn.Header>

Tried by desperation results in an really simple solution.
I put both elements into a StackPanel:
<DataGridTemplateColumn.Header>
<StackPanel>
<TextBlock Margin="0" Padding="0" Text="Mitarbeiter"/>
<TextBox HorizontalAlignment="Stretch" TextChanged="evh_InstantFilterChanged"/>
</StackPanel>
</DataGridTemplateColumn.Header>
and set the DataGrid.ColumnHeaderStyle simply to this:
<Style x:Key="style_DataGridColumnHeader" TargetType="DataGridColumnHeader">
<Style.Setters>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style.Setters>
</Style>
Works fine for me, the TextBox has always full width of the column header.

ListView Not Stretching to Flyout in Placement.Full

I'm Building a Win 10 UWP app. I have a ListView as per the below xaml, which is the content of a Button.Flyout. It is essentially the same as the standard ListView control, but provides a way for me to bind to the IsSelected property of the particular item. I've added the implementation for completeness. When MinWindowWitdth is 720, the placement mode is changed to Right. Whilst in this state, the ListViewItem stretches to fill the ListView. When not in this state (default), it is in Placement.Full, and the ListViewItem doesn't stretch to the entire ListView, which does seem to stretch to fill of the Flyout, as the VerticalScrollBar is visible against the right hand edge of the Flyout.
From what I could investigate, setting the ListView.ItemContainerStyle with HorizontalContentAlignment.Stretch should have achieved the outcome, however I am left with content that only stretches about half way across and I can't figure out why.
I notice that he CommandBar is included in the scrollable content in the full screen Flyout, however, when in Placement.Right it is not (which is the intended design). So it appears that Full is causing the Flyout to create a ScrollViewer and disregard the ListView.HorizontalAlignment.Stretch property. Is there a way to get around this?
xaml;
<Button.Flyout>
<Flyout x:Name="RulesListFlyout" Placement="Full">
<RelativePanel HorizontalAlignment="Stretch">
<commontools:ListViewWithSelectedItems x:Name="RulesListForInclusion" ItemsSource="{Binding AllRulesForInclusion}" SelectionMode="Multiple" IsMultiSelectCheckBoxEnabled="True"
RelativePanel.Above="RulesCommandB" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ListViewItem">
<RelativePanel Margin="12,0" HorizontalAlignment="Stretch">
<TextBlock x:Name="Title" Text="{Binding StoredDataObject.Title}" RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignRightWithPanel="True"/>
<TextBox x:Name="Variable" Text="{Binding InputVariable, Mode=TwoWay}" Width="50" AcceptsReturn="False" RelativePanel.Below="Title"
Visibility="{Binding ShowVariableBox, Converter={StaticResource TrueToVis}, Mode=TwoWay}"/>
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</commontools:ListViewWithSelectedItems>
<CommandBar x:Name="RulesCommandB" Grid.Row="1" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
<AppBarButton Icon="Accept" Label="Accept" Command="{Binding CommandSetIncludedRules}" Click="SetSpecialRuleFlyoutButton_Click"/>
<AppBarButton Icon="Cancel" Label="Cancel" Command="{Binding CommandResetIncludedRules}" Click="SetSpecialRuleFlyoutButton_Click"/>
</CommandBar>
</RelativePanel>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="MinWidth" Value="100"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Button.Flyout>
ListView Implementation;
public class ListViewWithSelectedItems : ListView
{
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
base.PrepareContainerForItemOverride(element, item);
ListViewItem listItem = element as ListViewItem;
Binding binding = new Binding();
binding.Mode = BindingMode.TwoWay;
binding.Source = item;
binding.Path = new PropertyPath("IsCheckedInList");
listItem.SetBinding(ListViewItem.IsSelectedProperty, binding);
}
}

WrapPanel with both horizontal and vertical orientation

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.

UserControl with Horizontal ListView in vertical ListView

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?