Hide header if no items inside the expander - c#

I would know if there is some fast way to hide all expander header if there are no items inside the expander content.
My expander:
<Expander IsExpanded="True" Loaded="Expander_Loaded" Visibility="{Binding Items[0],Converter={StaticResource collectionVisibilityHeaderConverter}}">
<Expander.Header>
<DockPanel HorizontalAlignment="Stretch" >
<TextBlock Text="{Binding Path=Name}" FontSize="18"></TextBlock>
<Button Style="{StaticResource ButtonStyle}" x:Name="ShowAllButton" Content=" SHOW ALL " HorizontalAlignment="Right" DockPanel.Dock="Right" Padding="15" Margin="0,0,15,0" Click="ShowAllButton_Click"></Button>
<Button Style="{StaticResource ButtonStyle}" x:Name="ShowOnlyButton" Content=" SHOW ONLY " HorizontalAlignment="Right" DockPanel.Dock="Right" Padding="15" Margin="0,0,15,0" Click="ShowOnlyButton_Click"></Button>
</DockPanel>
</Expander.Header>
<Expander.Style>
<Style TargetType="{x:Type Expander}">
<Setter Property="Background" Value="#ccf2ff"></Setter>
<Setter Property="TextElement.FontFamily" Value="Arial Nova"/>
</Style>
</Expander.Style>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
I'm using now an converter, and basically it works, but I think there are easier way.


You could use a DataTrigger in the Expander Style:
<Expander IsExpanded="True" Loaded="Expander_Loaded">
<Expander.Header>
<DockPanel HorizontalAlignment="Stretch" >
<TextBlock Text="{Binding Path=Name}" FontSize="18"></TextBlock>
<Button Style="{StaticResource ButtonStyle}" x:Name="ShowAllButton" Content=" SHOW ALL " HorizontalAlignment="Right" DockPanel.Dock="Right" Padding="15" Margin="0,0,15,0" Click="ShowAllButton_Click"></Button>
<Button Style="{StaticResource ButtonStyle}" x:Name="ShowOnlyButton" Content=" SHOW ONLY " HorizontalAlignment="Right" DockPanel.Dock="Right" Padding="15" Margin="0,0,15,0" Click="ShowOnlyButton_Click"></Button>
</DockPanel>
</Expander.Header>
<Expander.Style>
<Style TargetType="{x:Type Expander}">
<Setter Property="Background" Value="#ccf2ff"></Setter>
<Setter Property="TextElement.FontFamily" Value="Arial Nova"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count}" Value="0">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Expander.Style>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>

Related

How to show an Image in Mytoolkit Grid conditionally in UWP app

I am using MyToolKit Grid in my uwp app. So in one column of that grid I am displaying the image/icon. Now I want to show that image based on specific condition.Did any one have idea about this?
In the following code I want to show the admin.png conditionally.
The code I have used for Grid and Icon is:
<Border x:Name="WideMainGrid" Grid.Row="1" Grid.ColumnSpan="8" Background="Black" BorderThickness="1" BorderBrush="Gray" Margin="10,-5,5,0">
<ScrollViewer x:Name="svCartItemsList" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Grid.Row="1" Grid.ColumnSpan="8">
<controls:DataGrid x:Name="dgNewBill" RowBackgroundEvenBrush="Black" RowBackgroundOddBrush="Black" ItemsSource="{Binding objStockIssueItemList}" VerticalAlignment="Stretch" Height="470" SelectionMode="Single" TabNavigation="Local" HeaderBackground="Black" Background="Black" BorderThickness="1" BorderBrush="Gray" Grid.Row="2" Grid.ColumnSpan="9" Margin="0,0,0,0" Loading="dgNewBill_Loading">
<controls:DataGrid.Columns>
<controls:DataGridTextColumn Binding="{Binding SNumber}" Width="0.7*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<!--<Setter Property="MinHeight" Value="30"></Setter>-->
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<controls:DataGridTemplatedColumn CellTemplate="{StaticResource myCellTemplateMonth}" Width="3*" x:Name="ItemDesc" CanSort="False" IsAscendingDefault="True">
</controls:DataGridTemplatedColumn>
<controls:DataGridTextColumn Binding="{Binding uom}" Width="0.7*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,0,0,0"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<controls:DataGridTemplatedColumn Width="0.7*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="pricePanel" Height="30" Tapped="pricePanel_Tapped" HorizontalAlignment="Stretch" >
<TextBlock Name="price" Foreground="White" Text='{Binding editedPrice}' TextAlignment="Center" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTemplatedColumn Width="1.2*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="quantityPanel" Height="30" Tapped="quantityPanel_Tapped" HorizontalAlignment="Stretch">
<TextBlock Name="quantity" TextAlignment="Center" Foreground="White" Text='{Binding quantity}' HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTemplatedColumn Width="0.7*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="discountPanel" Height="30" Tapped="discountPanel_Tapped" HorizontalAlignment="Stretch" >
<TextBlock Name="Discount" TextAlignment="Center" Foreground="White" Text='{Binding discount}' HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTextColumn Binding="{Binding cartTotal}" Width="0.7*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<!--delete image column-->
<controls:DataGridTemplatedColumn CanSort="False" Width="0.7*">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="5,0,0,0">
<StackPanel x:Name="voidImagePanel" Tapped="voidImagePanel_Tapped">
<Image x:Name="VoidImage" Source="{Binding imageUrl}" Height="25" Width="35" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,2,0,0"></Image>
</StackPanel>
<StackPanel Height="28" Name="salesPersonDetails" Tapped="salesPersonDetails_Tapped">
<Image x:Name="salesDetail" Source="/Images/admin.png" Height="22" Width="35" Margin="0,2,0,0"></Image>
</StackPanel>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
</controls:DataGrid.Columns>
</controls:DataGrid>
</ScrollViewer>
</Border>

On MouseOver does not resize image to fit the given height and width wpf window using xaml

I need to increase the Height and Width of my images OnMouseOver which are placed in a StackPanel with orientation as horizontal so that the images span over my entire panel with a given size in my WPF window and that is what am unable to achieve. Please let me know if I am missing any math in my xaml attributes or anything wrong with my approach.
Thanks in advance.
The following is my xaml and later are my output images.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="245"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitleSlidesPanel" Grid.Row="0"
Orientation="Horizontal">
<StackPanel Orientation="Vertical"
Height="245"
Width="400" >
<Image x:Name="img1" VerticalAlignment="Top"
HorizontalAlignment="Left"
RenderOptions.BitmapScalingMode="HighQuality"
Style="{StaticResource imageStyle}"
MouseDown="Img1_OnMouseDown"
MouseUp="Img1_OnMouseUp">
</Image>
<CheckBox x:Name="Chkbox1"
Content="Image1"
Width="100"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left"
VerticalContentAlignment="Center"
FontSize="12"
Margin="0,5,0,0"
Foreground="Black"
Height="20">
</CheckBox>
</StackPanel>
<StackPanel Orientation="Vertical"
Height="245"
Width="400"
Margin="-400,0,0,0" >
<Image x:Name="Img2" VerticalAlignment="Top"
HorizontalAlignment="Right"
RenderOptions.BitmapScalingMode="HighQuality"
Style="{StaticResource imageStyle}"
MouseDown="Img2_OnMouseDown"
MouseUp="Img2_OnMouseUp" >
</Image>
<CheckBox x:Name="Chkbox2"
Content="Image2"
FontSize="12"
Margin="0,5,135,0"
HorizontalContentAlignment="Right"
HorizontalAlignment="Right"
VerticalContentAlignment="Center"
Foreground="Black"
Height="20">
</CheckBox>
</StackPanel>
</StackPanel>
</Grid>
<Style x:Key="imageStyle" TargetType="{x:Type Image}">
<Setter Property="Height" Value="100" />
<Setter Property="Width" Value="200" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Height" Value="245" />
<Setter Property="Width" Value="400" />
</Trigger>
</Style.Triggers>
</Style>

Try putting your style in the resources of either the stackpanel or the grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="245"/>
</Grid.RowDefinitions>
<Grid.Resources>
<Style x:Key="imageStyle" TargetType="{x:Type Image}">
<Setter Property="Height" Value="100" />
<Setter Property="Width" Value="200" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Height" Value="245" />
<Setter Property="Width" Value="400" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<StackPanel x:Name="TitleSlidesPanel" Grid.Row="0"
Orientation="Horizontal">
<StackPanel Orientation="Vertical"
Height="245"
Width="400" >
<Image x:Name="img1" VerticalAlignment="Top"
HorizontalAlignment="Left"
RenderOptions.BitmapScalingMode="HighQuality"
Style="{StaticResource imageStyle}"
MouseDown="Img1_OnMouseDown"
MouseUp="Img1_OnMouseUp">
</Image>
<CheckBox x:Name="Chkbox1"
Content="Image1"
Width="100"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left"
VerticalContentAlignment="Center"
FontSize="12"
Margin="0,5,0,0"
Foreground="Black"
Height="20">
</CheckBox>
</StackPanel>
<StackPanel Orientation="Vertical"
Height="245"
Width="400"
Margin="-400,0,0,0" >
<Image x:Name="Img2" VerticalAlignment="Top"
HorizontalAlignment="Right"
RenderOptions.BitmapScalingMode="HighQuality"
Style="{StaticResource imageStyle}"
MouseDown="Img2_OnMouseDown"
MouseUp="Img2_OnMouseUp" >
</Image>
<CheckBox x:Name="Chkbox2"
Content="Image2"
FontSize="12"
Margin="0,5,135,0"
HorizontalContentAlignment="Right"
HorizontalAlignment="Right"
VerticalContentAlignment="Center"
Foreground="Black"
Height="20">
</CheckBox>
</StackPanel>
</StackPanel>
</Grid>

How do you bind a ListBox of CheckBoxes while preserving selection style?

I have the following XAML to bind data to a ListBox filled with CheckBoxes:
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=StakeTypes}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}" SelectionChanged="lbStakes_SelectionChanged" SelectionMode="Extended">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Problem is, the style for the ListBox selection is different than if I manually created each ListBox Item:
<ListBox Background="Transparent" Cursor="Hand" Grid.Column="6" Grid.Row="3" Name="lbStakes" SelectionMode="Extended">
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Low" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Medium" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="High" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Highest" />
</ListBoxItem>
</ListBox>
Here are the images:
I would like it to look like the second image. Any ideas are greatly appreciated.
Update: The following is the style I am trying to apply to the ListBoxItem:
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="3" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

The two styles are different because in your bound ListBox you are using ItemContainerStyle="{StaticResource SelectionListBoxItem}", whereas in your second snippit, the default listbox item style applies. Try removing this style assignment from the bound listbox.

<Window.Resources>
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" BorderBrush="Black" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=IsSelectede}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch" KeyboardNavigation.TabNavigation="None">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
some of the binding properties are changed please correct them according to your properties .And also the style of your brush.I hope this will help.

Disable blue border for selected Listview item

I have a ListView with Horizontal WrapPanel as its ItemsPanelTemplate.
I want to get rid of the blue background for selected item. It is visible only on the left of the selected item.
There are many similar question on SO and I tried a lot of the solutions and none of them worked.
This is what I have already tried:
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<!-- Foreground for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black"/>
<!-- Background for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
<!--SelectedItem without focus-->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="Control.MouseDoubleClick" Handler="HandleSelectedItemDoubleClick"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="2" CenterX="12" CenterY="12" />
</Setter.Value>
</Setter>
<Setter Property="Panel.ZIndex" Value="150"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="210" Margin="15" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>

You need to overwrite the SystemColors.HighlightBrushKey for the ListView to be Transparent (or whatever color you want)
I typically put this in the ListView.Resources so it only applies to the specific ListView, and not all ListViews in my application
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</ListView.Resources>
Its very close to what you have in your code already, but you need to set it for the ListView.Resources, not ListViewItem.Resources

To remove all default styling (hovering, selecting, etc.) just define a custom Template for the ItemContainer (not the Item itself):
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Found on MSDN Forum

This is what did it for me:
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical" Background="Transparent" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate">
<StackPanel Orientation="Vertical" Background="LightGray" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="ContainerStyle">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=ItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>

The simplest way to do this is to set the background to {x:Null} when the item is selected, using a trigger.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>

WPF StackPanel Layout Question

I'm trying to create a layout similar to this:
alt text http://img20.imageshack.us/img20/3533/stackn.png
Here's the code I have:
<StackPanel TextBlock.FontFamily="Segoe UI" Orientation="Horizontal">
<StackPanel HorizontalAlignment="Stretch" Width="Auto">
<TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" />
</StackPanel>
<StackPanel>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Move">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</StackPanel>

Why don't you use a Grid for this?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Title}" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Move" />
</StackPanel>
</Grid>

I think you might be better off with a grid as your parent element. Omitting your styles and what not, here's the XAML for the layout in your drawing.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="50" /> <!-- or some other fixed width -->
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<!-- left hand stackpanel content -->
</StackPanel>
<StackPanel Grid.Column="1">
<!-- right hand StackPanel content -->
</StackPanel>
</Grid>

You don't really want a StackPanel for your red container. I'd go with a DockPanel, dock the rightmost blue panel to the right, and ensure LastChildFill is on to ensure the leftmost blue panel expands to the window width.

Here is the code for what I get from your post:
<DockPanel TextBlock.FontFamily="Segoe UI" LastChildFill="True">
<StackPanel DockPanel.Dock="Right">
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Move">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
<StackPanel HorizontalAlignment="Stretch" Width="Auto">
<TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" />
</StackPanel>
</DockPanel>
Hope this helps!!

Categories

Resources