We Keep Coding

XAML ListView auto width column

I'm trying to develop an universal app for personal use, however I am running into the problem that the second column in my ListView doesn't align properly, I have the following XAML:
<ListView
Grid.Row="1"
ItemsSource="{Binding Items, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Stretch="None" Source="{Binding Image}" />
<TextBlock Grid.Column="0" Grid.Row="2" Text="{Binding Name}" HorizontalAlignment="Center" />
<Image Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Source="{StaticResource HighAlchImage}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Which results in the following image:
However, I want the second image (the one that's the same every time) to align with itself, preferably with the width of the first Column to be Auto. Is this possible?

You need to stretch width of the ListViewItem to the width of the ListView.
i.e. You have to set HorizontalContentAlignment of the ListView's ItemContainerStyle to Stretch.
Normally I would create a copy of the Default ListViewItemStyle, then do my customization based on the default style:
(put the following code inside <ListView> Tag)
<ListView.Resources>
<!-- Better to put this to another XAML file -->
<Style x:Key="ListViewItemStyleDefault" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="12,0,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline" ContentTransitions="{TemplateBinding ContentTransitions}" CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListViewItemStyleStretch" TargetType="ListViewItem" BasedOn="{StaticResource ListViewItemStyleDefault}">
<!-- Magic here -->
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
<StaticResource ResourceKey="ListViewItemStyleStretch"/>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<!-- Your ItemTemplate... -->
</ListView.ItemTemplate>

The Grid panel has such functionality built in. In order to utilize it you should set SharedSizeGroup on your column definitions, and then set attached Grid.IsSharedSizeScope on the element parenting all grids which should share column sizes (ListView would be a good choice in your case).
<ListView Grid.Row="1"
ItemsSource="{Binding Items, UpdateSourceTrigger=PropertyChanged}"
Grid.IsSharedSizeScope="True">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column1" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Column2" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Stretch="None" Source="{Binding Image}" />
<TextBlock Grid.Column="0" Grid.Row="2" Text="{Binding Name}" HorizontalAlignment="Center" />
<Image Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Source="{StaticResource HighAlchImage}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You might want to take some care while choosing values for SharedSizeGroup properties - preferably, they should be unique per visual tree.

Do it the opposite:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
This way your first column will use the space it needs and the second column will be aligned.

Searching for a solution, I ended up here, #Ryan answer is near to solve my problem, but some adjusts must be done.
1 Create An style:
<Style x:Key="LstViewItemContainerStyle" TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
2 Apply style to the list view as this:
<ListView
...
ItemContainerStyle="{StaticResource LstViewItemContainerStyle}">
</ListView>

Style control within control on Trigger

I have a LabeledTextBox in my WPF app that's as simple as can be:
<Grid x:Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Text="{Binding Label}"
FontWeight="Bold"
VerticalAlignment="Bottom"
Margin="5,2,5,0"/>
<TextBox Grid.Row="1"
Text="{Binding Text}"
VerticalAlignment="Top"
Margin="5,0,5,2"/>
</Grid>
I bind all my models to that guy to display. I've successfully implemented IDataErrorInfo, and can style the LabeledTextBox like:
<Style TargetType="controls:LabeledTextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="5"/>
</Trigger>
</Style.Triggers>
</Style>
This all works, and the entire control is bordered in red (obviously). What's I'd like is to just manipulate the TextBox within the LabeledTextBox, my end goal being to change the background to a pastel red color.
How can I access my TextBox from within the trigger, when the trigger is set on the entire LabeledTextbox?
I imagine this is a seemingly simple task, I just can't get the syntax right. I'm working in a .NET4.0 environment, if that is relevant.
Thanks!

Hi I dont think we can access elements through styles but yes we can refer through ControlTemplate.Triggers and specifying the TargetName Property in Setter.
<Style TargetType="{x:Type wpfApplication4:LabelledTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type wpfApplication4:LabelledTextBox}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Margin="5,2,5,0"
VerticalAlignment="Bottom"
FontWeight="Bold"
Text="ergergergegr" />
<TextBox
x:Name="MyTextBox"
Grid.Row="1"
Margin="5,0,5,2"
VerticalAlignment="Top"
Text="gtwererggerg" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="MyTextBox" Property="BorderBrush" Value="Red"/>
<Setter TargetName="MyTextBox" Property="BorderThickness" Value="5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Add a dependency property to your user control.
Bind Your TextBlock Background property to that dependency property.
Change that property in the trigger.

Landscape-Portrait orientation in WPF

I am new to WPF and working on dynamic view creation. I have a scenario where i need to modify my UI based on monitor landscape and/or portrait, like
I already have property which tells me that monitor is in landscape or portrait mode.
Is this possible in WPF?

This is possible. You would create a view that implements both layouts and switches between them using a DataTrigger:
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Content">
<Setter.Value>
<!-- Put your portrait layout here -->
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsLandscape}" Value="True">
<Setter Property="Content">
<Setter.Value>
<!-- Put your landscape layout here -->
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
Using the {Binding IsLandscape} expression, the DataTrigger observes the IsLandscape property of the view's DataContext. This is explained in detail on MSDN. This means that you should set the view's DataContext property to the object that has the IsLandscape property that you've mentioned in your question. Full example:
Create new empty WPF project.
Update your MainWindow.xaml.cs:
public MainWindow()
{
this.InitializeComponent();
this.DataContext = this; // You would put a ViewModel here when using MVVM design pattern
}
public static readonly DependencyProperty IsLandscapeProperty
= DependencyProperty.Register("IsLandscape",
typeof (bool),
typeof (MainWindow));
public bool IsLandscape
{
get { return (bool) GetValue(IsLandscapeProperty); }
set { SetValue(IsLandscapeProperty, value); }
}
private void ChangeOrientation(object sender, RoutedEventArgs e)
{
this.IsLandscape = !this.IsLandscape;
}
Update your MainWindow.xaml. Delete the default Grid and put this instead:
<Window.Resources>
<Style TargetType="UserControl">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="#CCDDEE" />
<Setter Property="Margin" Value="3" />
</Style>
</Window.Resources>
<DockPanel>
<Button DockPanel.Dock="Bottom" Margin="5" Content="Change Orientation"
Click="ChangeOrientation" />
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<UserControl Content="Sub 1" />
<UserControl Grid.Column="1" Content="Sub 2" />
<UserControl Grid.Row="1" Grid.ColumnSpan="2" Content="Main" />
</Grid>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsLandscape}" Value="True">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<UserControl Grid.Column="1" Content="Sub 1" />
<UserControl Grid.Column="1" Grid.Row="1" Content="Sub 2" />
<UserControl Grid.RowSpan="2" Content="Main" />
</Grid>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DockPanel>

Yes, you can implement both of this UI and use VisualStateManager to control which UI to display.
Also you can bind visibility of layout container to your property using converter

3x3 Grid containing a Path in the center fills the entire grid

I have the following ControlTemplate that I am using in an ItemsControl. It is essentially a 3x3 Grid with a Path in the center and a Textbox/Textblock on top of it. When I use this, the Path takes up all of the space within the ItemsControl, and ignores the column/row definition constraints. Can anyone tell me why this is happening? I tried wrapping the Path in a Canvas but that didn't seem to help.
Thanks!
<controls:Toolbox x:Key="DrawingShapeTemplates"
DefaultItemSize="60, 60"
SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ItemsControl.Items>
<Path Style="{StaticResource Square}"
ToolTip="Square Shape">
<controls:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" />
<TextBox MinWidth="{Binding RelativeSource={RelativeSource AncestorType=controls:DesignerItem}, Path=ActualWidth}" />
</StackPanel>
<Canvas Grid.Column="1"
Grid.Row="1">
<Path Style="{StaticResource Square_DragThumb}" />
</Canvas>
</Grid>
</ControlTemplate>
</controls:DesignerItem.MoveThumbTemplate>
</Path>
</ItemsControl.Items>
</controls:Toolbox>
The Style.
<Style x:Key="Square"
TargetType="Path"
BasedOn="{StaticResource StandardShapeStyle}">
<Setter Property="Data">
<Setter.Value>
<RectangleGeometry Rect="50 50 50 50" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Square_DragThumb"
TargetType="Path"
BasedOn="{StaticResource Square}">
<Setter Property="IsHitTestVisible"
Value="True" />
<Setter Property="Fill"
Value="Transparent" />
<Setter Property="Stroke"
Value="Transparent" />
</Style>
Edit
The source for this was downloaded from hereenter link description here. If you replace the <Path Style="{StaticResource Decision}" at line 469 with the following, you will get the same result that I do.
<Path Style="{StaticResource Decision}"
ToolTip="Decision">
<s:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" />
<TextBox MinWidth="{Binding RelativeSource={RelativeSource AncestorType=s:DesignerItem}, Path=ActualWidth}" />
</StackPanel>
<Path Grid.Column="1"
Grid.Row="1"
Style="{StaticResource Decision_DragThumb}" />
</Grid>
</ControlTemplate>
</s:DesignerItem.MoveThumbTemplate>
</Path>
The following are pictures of what I am trying to accomplish and what the actual result is. I want to display a label and a text box on all four sides of the selected item when it is selected. Ultimately the label/textbox visibility will be databound to the DesignerItem.IsSelected dependency property, but that hasn't been wired up yet.
Expected result:
Actual result:

Typically Canvas do to clip it's children by default so you need to set it explicitly as ClipToBounds="True"
eg
<Canvas Grid.Column="1"
Grid.Row="1"
ClipToBounds="True">
<Path Style="{StaticResource Square_DragThumb}" />
</Canvas>
Update
Replace the Path element in FlowChartSymbols.xaml at line 469 with the following Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" HorizontalAlignment="Center"/>
<TextBox />
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=s:DesignerItem}}"
Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
<Path Style="{StaticResource Decision}"
Grid.Row="1" Grid.Column="1"
ToolTip="Decision">
<s:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Path Style="{StaticResource Decision_DragThumb}" />
</ControlTemplate>
</s:DesignerItem.MoveThumbTemplate>
</Path>
</Grid>
this is how you can achieve the same. also fixed toolbox issue by adding a trigger to detect if it is inside a designer item or simply in a toolbox

Making Background transparent for disabled TextBox

I have a disabled TextBox in a Grid.
The Grid has a BackgroundColor and I want the TextBox to just show some Text.
How can I get the Background of a disabled TextBox to be Transparent?
Here is what I have tried:
<UserControl x:Class="MyProject.Views.TextBoxView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="435"
d:DesignWidth="589"
FontFamily="Arial"
mc:Ignorable="d">
<Grid Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.Resources>
<Style x:Key="TextboxStyle_uniqueName" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="Control.IsEnabled" Value="False">
<Setter Property="Background" Value="Transparent" />
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0"
Grid.Column="0"
Width="Auto"
Height="Auto"
Margin="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
BorderThickness="0"
FontFamily="Courier New"
FontSize="30"
Foreground="Black"
IsEnabled="False"
IsReadOnly="True"
IsTabStop="False"
Style="{StaticResource TextboxStyle_uniqueName}"
Text="BLAHBLAHBLAH" />
</Grid>
</Grid>
</UserControl>
If the Textbox is enabled, everything is okay and setting the Background works.
But as soon I disable it, I can no longer set the Background correctly.
Thought about some hack of Binding IsEnabled, so that the Background is set before.
-EDIT-
Strangly enough using TextBlock solves the issue. But I definitly have no style in the project that sets a background different from the default for TextBox.