WPF Click on userControl - wpf

I wanted to make any grid row inside the container window clickable.
Each row is a usercontrol called "MyBookControl".
when the userControl is clicked, i wanted to raise the command "DownloadCommand".
I'm using mvvm pattern.
container view: https://onedrive.live.com/redir?resid=3A8F69A0FB413FA4!124&authkey=!ANdfYAk6f0Vf-8s&v=3&ithint=photo%2cpng
BookControl:
<UserControl x:Name="MyBookControl" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Opacity" Value="0.6"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Label Grid.Row="0">Title</Label>
<Label Grid.Row="1">Author</Label>
<Label Grid.Row="2">Description</Label>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Title}"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Author}"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Description}"/>
<Button Grid.Column="2" Grid.RowSpan="3" Command="{Binding DownloadCommand}" Content="Download" />
<Ellipse Grid.Column="3"
Height="20" Width="20"
Stroke="Black"
StrokeThickness="0.5"
HorizontalAlignment="Center"
Grid.Row="1"
/>
<Controls:PieSlice Grid.Column="3" Grid.Row="1" Stroke="Black" Fill="Black"
Height="20" Width="20"
StartAngle="0" EndAngle="{Binding Percent}"
HorizontalAlignment="Center" />
</Grid>
</UserControl>

As I understand you, you want to build a responsive panel to hold all your collection members inside. You can try to use a listView control, and put your user control as an item template of a ListViewItem. There is as select functionality on the house in there (ListView). In this way ListView can be binded to your main viewmodel with a bunch of objects, and each user conntrol can ne binded to a single object.
<ListView ItemsSource="{Binding ToYourSourceCollection}">
<ListView.ItemTemplate>
<DataTemplate>
<YourUserControl/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Then you can build a behvior that work around of a ListView events or just listen to a Selected property changes.

Related

Powershell WPF style template for disabled ListBox

I have a powershell script which at some point creates a WPF form for some basic input from the user.
I have a ListBox with CheckBoxes where user selects necessary options, but it is disabled by default, and user needs to do some actions before it enables. As you can see from below XAML, the overall design is dark, so default disabled styling for ListBox looks pretty ugly. How do I need to change below XAML, so that when disabled, I can control at least the background? I know that I need to create a style template and add trigger that switches styles when ListBox is disabled, but I tried several approaches found online and none of them work.
Here's the XAML I'm using
<Window x:Name="MyLittleFormMainWindow" x:Class="MyLittleForm.MainWindow"
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"
xmlns:local="clr-namespace:MyLittleForm"
mc:Ignorable="d"
Title="My Little Form" Height="450" Width="800" FontFamily="OCRB" FontSize="14" Opacity="0.8" Background="#33000000" Foreground="Lime" BorderBrush="#05000000" WindowStyle="ToolWindow" BorderThickness="0" ResizeMode="NoResize">
<Grid Margin="0,10,4,0">
<Grid.RowDefinitions>
<RowDefinition Height="33*"/>
<RowDefinition Height="173*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18*"/>
<ColumnDefinition Width="61*"/>
</Grid.ColumnDefinitions>
<Button x:Name="buttonGetFiles" Content="Press to enable" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="160" Height="48" Background="#F2323232" Foreground="#FFFDA100" FontSize="18" Grid.Column="0" Grid.Row="0"/>
<ListBox x:Name="checkBoxList" HorizontalAlignment="Left" Margin="10,10,10,10" VerticalAlignment="Top" Width="160" Height="200" ItemsSource="{Binding MyItemsListProperty}" SelectionMode="Multiple" Background="#F2323232" Foreground="#FFFDA100" Grid.Column ="0" Grid.Row="1" IsEnabled="False" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2">
<CheckBox IsChecked="{Binding isChecked}" BorderBrush="#FF000A64" Background="Lime" Foreground="Lime" Content="{Binding Content}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label x:Name="textLabel" Content="My Little Form" Grid.Column="1" Grid.Row ="0" HorizontalAlignment="Right" Margin="10,10,10,10" VerticalAlignment="Top" FontFamily="OCR A Extended" FontSize="42" Foreground="Lime" Height="48" />
</Grid>
</Window>
You have to define a style for ItemsPanelTemplate of the ListBox only.
Try this one as an example:
<Grid Margin="0,10,4,0">
<Grid.RowDefinitions>
<RowDefinition Height="33*"/>
<RowDefinition Height="173*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18*"/>
<ColumnDefinition Width="61*"/>
</Grid.ColumnDefinitions>
<Button x:Name="buttonGetFiles" Content="Press to enable" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="160" Height="48" Background="#F2323232" Foreground="#FFFDA100" FontSize="18" Grid.Column="0" Grid.Row="0"/>
<ListBox x:Name="checkBoxList"
HorizontalAlignment="Left"
Margin="10,10,10,10"
VerticalAlignment="Top" Width="160" Height="200"
ItemsSource="{Binding MyItemsListProperty}"
SelectionMode="Multiple"
Foreground="#FFFDA100"
Grid.Column ="0" Grid.Row="1"
IsEnabled="False" >
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="Background" Value="#F2323232"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled}" Value="False">
<Setter Property="Background" Value="#F2323232"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel >
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Background" Value="#F2323232"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=IsEnabled}" Value="False">
<Setter Property="Background" Value="#AA323232"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2">
<CheckBox IsChecked="{Binding isChecked}" BorderBrush="#FF000A64" Background="Lime" Foreground="Lime" Content="{Binding Content}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label x:Name="textLabel" Content="My Little Form" Grid.Column="1" Grid.Row ="0" HorizontalAlignment="Right" Margin="10,10,10,10" VerticalAlignment="Top" FontFamily="OCR A Extended" FontSize="42" Foreground="Lime" Height="48" />
</Grid>

WPF double line on the top of listbox

I am new to wpf. I need to have a window that list all accounts added. But my application shows a double line below the "Accounts". Not sure what caused this. could someHow to fix this? Here is my xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="StackPanel1" Grid.Row="0" HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Width="444">
<TextBlock x:Name="AddAccountTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Height="60" Width="369" Text="Add account to allow for simple access to your company resources
" SnapsToDevicePixels="True"/>
<Button x:Name="AddAccount" Content="Add Account" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" RenderTransformOrigin="0.466,0.977" IsCancel="True" Height="40" Foreground="White" Background="Blue" Click="OnAddAccount"/>
</StackPanel>
<StackPanel x:Name="StackPanel2" Grid.Row="2" HorizontalAlignment="Left" Height="154" Width="444">
<TextBlock x:Name="AccountsTextBlock" TextWrapping="Wrap" Text="Accounts" Height="25" Width="68" FontSize="16" FontFamily="Tahoma"/>
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border" BorderBrush="Gray" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="LightSkyBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" Width="100" Source="{Binding Path=imagePath}" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" Text="{Binding Path=userInfo}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
You may remove the borders of the ListBox by setting the BorderThickness property:
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top" Margin="100"
BorderThickness="0">
You may set it to 1,0,1,0 to remove only the top and bottom borders. The order is left, top, right, bottom.

Issue with Sorting and Filtering on WPF DataGrid

I'm having some issues trying to get a filter box, which is added to the header of a datagrid column through styling, working. When I do not sort the column everything is working fine, no issues there, but the moment I sort, I don't see what's typed anymore and I can only filter on one char (can't clear the filter either as there're no characters to delete and trigger the TextChanged event).
What's also odd is that the TextBox is nowhere to be found in the visual tree, starting from the DataGridColumnHeader instance, when the column is sorted. If I could find it, I could reset the text at the end of the cycle and the issue would probably be solved.
Visually it looks like this, I typed a "P" in all 3 cases:
The relevant styling that's behind this is the following:
<Page.Resources>
<Style x:Key="Filter" TargetType="TextBox">
<EventSetter Event="TextChanged" Handler="Filter_TextBox_TextChanged"/>
</Style>
<Style TargetType="{x:Type DataGrid}">
<!-- Some visual styling like margins and colors on the grid -->
<Style.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<!-- Some visual styling like margins and colors on the header -->
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Margin="10,0,10,0" TextWrapping="WrapWithOverflow" Text="{Binding}"/>
<fa:FontAwesome Grid.Column="1" Grid.Row="0" Icon="LongArrowUp" Foreground="#dbdbdb" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<fa:FontAwesome Grid.Column="2" Grid.Row="0" Margin="0,0,10,0" Icon="LongArrowDown" Foreground="#dbdbdb" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Margin="0,10,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="#dbdbdb">
<TextBox Style="{StaticResource Filter}" />
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter Property="Background" Value="#F0F0F0"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Margin="5,0,10,0" TextWrapping="WrapWithOverflow" Text="{Binding}"/>
<fa:FontAwesome Grid.Column="1" Grid.Row="0" Margin="0,0,10,0" Icon="SortAmountAsc" Foreground="#919191" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<StackPanel Grid.Column="0" Grid.ColumnSpan="3" Margin="0,10,0,0" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#dbdbdb">
<TextBox Style="{StaticResource Filter}" />
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter Property="Background" Value="#F0F0F0"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="5,0,10,0" TextWrapping="WrapWithOverflow" Text="{Binding}"/>
<fa:FontAwesome Grid.Row="0" Grid.Column="1" Margin="0,0,10,0" Icon="SortAmountDesc" Foreground="#919191" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="0,10,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#dbdbdb">
<TextBox Style="{StaticResource Filter}" />
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Nothing special in the definition of the DataGrid:
<DataGrid x:Name="History_DataGrid" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" HeadersVisibility="Column" GridLinesVisibility="None" ItemsSource="{Binding history}" AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectionMode="Single" SelectionUnit="FullRow" CanUserAddRows="false" SelectionChanged="History_DataGrid_SelectionChanged" Sorting="History_DataGrid_Sorting">
<DataGrid.Columns>
<DataGridTextColumn Header="{x:Static resx:Resources.Product}" Binding="{Binding Path=Product}" Width="*" ElementStyle="{StaticResource Wrap}" />
<DataGridTextColumn Header="{x:Static resx:Resources.Label}" Binding="{Binding Path=Label}" Width="*" ElementStyle="{StaticResource Wrap}" />
<DataGridTextColumn Header="{x:Static resx:Resources.Color}" Binding="{Binding Path=Color}" Width="*" ElementStyle="{StaticResource Wrap}" />
<DataGridTextColumn Header="{x:Static resx:Resources.Volume}" Binding="{Binding Path=Volume}" Width="Auto" ElementStyle="{StaticResource Wrap}" />
<DataGridTextColumn Header="{x:Static resx:Resources.LastPrinted}" Binding="{Binding Path=LastPrinted, StringFormat=\{0:yyyy-MM-dd\}}" Width="Auto" ElementStyle="{StaticResource Wrap}" />
<DataGridTextColumn Header="{x:Static resx:Resources.TimesPrinted}" Binding="{Binding Path=TimesPrinted}" Width="Auto" ElementStyle="{StaticResource Wrap}" />
</DataGrid.Columns>
</DataGrid>
Possible ways to bypass the issue, though I have no idea how to accomplish them:
Create a second header row with the filter boxes that doesn't changes
after sorting.
Setting the value of the filter textbox at the end of
the event cycle, I have a function where I prepare the paging
controls that is triggered after the datagrid is rebound, though I
need to be able to access the textbox instances for that. I can if
it's unsorted, but I can't find the box when the colums is sorted.
Any idea how to get this fixed, it's really a breaking issue and none of the search results have come up with anything usefull.
EDIT: Some scenarios for clarification
How it should work and how it works as long as I don't sort:
I type 'A' in the textbox.
The source of the datagrid is filtered on the the text "A" and rebound.
The textbox shows "A" as the filter.
I type 'B' in the textbox.
The source of the datagrid is filtered on the the text "AB" and rebound.
The textbox shows "AB" as the filter.
When the column is sorted, it behaves quite differently:
I sort the column and it loses the text that was already in the textbox.
I type 'A' in the textbox.
The source of the datagrid is filtered on the the text "A" and rebound.
The textbox stays empty and does not show "A" as the filter.
I type 'B' in the textbox.
The source of the datagrid is filtered on the the text "B", not "AB" (it lost the "A"), and rebound.
The textbox stays empty and does not show "A", "B" or "AB" as the filter.
As a result removing the filter is quite hard as well as there's no text to delete and trigger the TextChanged event.
I got into contact with some WPF specialists in my company and they helped me reach a workable solution.
The edited Style looks as followed:
<Page.Resources>
<Style x:Key="Filter" TargetType="TextBox">
<EventSetter Event="TextChanged" Handler="Filter_TextBox_TextChanged"/>
</Style>
<Style TargetType="{x:Type DataGrid}">
<!-- Some visual styling like margins and colors on the grid -->
<Style.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<!-- Some visual styling like margins and colors on the header -->
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Margin="10,0,10,0" TextWrapping="WrapWithOverflow" Text="{Binding}"/>
<fa:FontAwesome Grid.Column="1" Grid.Row="0" x:Name="SortIcon1" Icon="LongArrowUp" Foreground="#dbdbdb" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<fa:FontAwesome Grid.Column="2" Grid.Row="0" x:Name="SortIcon2" Margin="0,0,10,0" Icon="LongArrowDown" Foreground="#dbdbdb" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Margin="0,10,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="#dbdbdb">
<TextBox Style="{StaticResource Filter}" />
</StackPanel>
</Grid>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding SortDirection, RelativeSource={RelativeSource AncestorType=DataGridColumnHeader}}" Value="Ascending">
<Setter TargetName="SortIcon1" Property="Icon" Value="SortAmountAsc" />
<Setter TargetName="SortIcon2" Property="Visibility" Value="Hidden" />
</DataTrigger>
<DataTrigger Binding="{Binding SortDirection, RelativeSource={RelativeSource AncestorType=DataGridColumnHeader}}" Value="Descending">
<Setter TargetName="SortIcon1" Property="Icon" Value="SortAmountDesc" />
<Setter TargetName="SortIcon2" Property="Visibility" Value="Hidden" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter Property="Background" Value="#F0F0F0"/>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter Property="Background" Value="#F0F0F0"/>
</Trigger>
</Style.Triggers>
</Style>
Basically my main mistake was to have a DataTemplate per sort state. They pointed out that I could add a trigger to the Datatemplate bound to the Header's event. Adding a name to my sort icons made me able to change them with the TargetName attribute in the new trigger sections.
As there's now only one instance of the textbox, the issue is resolved.

WPF: Adding a ProgressBar to ListBox Items

I'm trying to make the background of my ListBoxItems to be constituted of a ProgressBar, but the "Z-Index" thing is not seemingly working for me. I have read somewhere that Grid doesn't support Z-Index (like Canvas) and that by default elements are rendered in the order they are added. This is what apparently happens in my case too. But when I click on a listbox item, my TextBlock (see below) disappears, apparently because the ProgressBar comes to front. Interestingly, the other child controls (image and animation) do not disappear, so I'm kind of puzzled.
Here's my ListBox's ItemTemplate:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Name="ListBoxGrid">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ProgressBar Grid.Column="0" Grid.ColumnSpan="3" Background="White" Value="{Binding Path=SendProgress}" />
<Image Width="50" Stretch="Uniform" Grid.Column="0" HorizontalAlignment="Center" Margin="20,0,0,0" VerticalAlignment="Center" Source="{Binding Image}" />
<TextBlock FontSize="16" Grid.Column="1" VerticalAlignment="Center" Text="{Binding Path=ImageFilePath, Padding="20,0,0,0" />
<Canvas Grid.Column="2">
<Image Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" Source="{Binding Status}" />
<my:LoadingAnimation HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" Canvas.Left="5" Canvas.Top="5" Visibility="{Binding IsSending, Converter={StaticResource BooleanToVisibilityConverter1}}" />
</Canvas>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Panel.ZIndex property works fine for me Sample code:
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Panel.ZIndex="2">
<Button Name="goButton" Height="30" Width="50" Margin="0,10,0,50" Click="goButton_Click">GO!</Button>
<ProgressBar Name="progressBar" Width="300" Height="30" />
</StackPanel>
<Label VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="100" Content="SHOWTHIS" Panel.ZIndex="1"/>
</Grid>
Perhaps Style Datatriggers for visibility might be usefull in this case if i understood it well
Sample code for each element of your datatemplate:
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSending}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSending}" Value="False">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>

WPF styles and grid layout issues

RESOLVED EDIT:
Because it is not clear through the discussion nothing was really wrong with the structure of the grids or their placement. The designer however misrepresented where the grid was. For some reason it placed the grid in the upper left hand corner of the window rather then within the content portion of the window. Once that is accounted for everything else lined up as anticipated.
I am working on a WPF project and have run into an issue with styling my forms. I needed a custom window, one without all the windows stuff; so I created a custom window style that I could apply to all my windows. Within that style I created a grid so that I could more easily place the default elements of the default window style. Then on my dashboard window I apply the default window style and all looks well. But once I attempt to place a grid within the dashboard window things start getting wonky.
In order to compensate for this I added an Adorner Decorator to the grid in the default style and placed it at the content location of that grid. This does allow me to place my content within dashboard window, but it does not follow the grid rules made by the dashboards grid.
So all I am attempting to do is create a custom window style that can be applied to all of my windows, and be able to use a grid to slice up the area designated contented by that windows default style.
This is the meaningful portion of the windows style, it lays out a grid for the boarders(drag labels), header, footer, control bar buttons(max, min, close) and content.
<Style x:Key="DefaultWindowStyle" TargetType="{x:Type Window}" >
<Setter Property="Margin" Value="5" />
<Setter Property="ResizeMode" Value="NoResize" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Background" Value="MidnightBlue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Name="WindowGrid">
<Grid.RowDefinitions>
<RowDefinition Name="TopBorderRow" Height="5" />
<RowDefinition Name="TitleBarRow" Height="30" />
<RowDefinition Name="RContentRow" Height="*" />
<RowDefinition Name="BottomBorderRow" Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="LeftBorderCol" Width="5" />
<ColumnDefinition Name="CContentCol" Width="*" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
<ColumnDefinition Name="RightBorderCol" Width="5" />
</Grid.ColumnDefinitions>
<s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="6" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Width="5" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Cursor="SizeWE" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
<s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Width="5" Grid.Row="0" Grid.Column="5" Grid.RowSpan="4" Cursor="SizeWE" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
<s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="0" Grid.Column="0" Cursor="SizeNWSE" HorizontalAlignment="Left" VerticalAlignment="Top" />
<s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="0" Grid.Column="5" Cursor="SizeNESW" HorizontalAlignment="Right" VerticalAlignment="Top" />
<s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="3" Grid.Column="0" Cursor="SizeNESW" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
<s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="3" Grid.Column="5" Cursor="SizeNWSE" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<s:DragLabel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" Style="{DynamicResource DefaultWindowTitle}" Content="{TemplateBinding Title}"/>
<s:TitleBarButton x:Name="Minimize" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="2">
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{DynamicResource ButtonMinimize}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="{DynamicResource ButtonMinimizeHover}"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</s:TitleBarButton>
<s:TitleBarButton x:Name="Maximize" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="3">
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{DynamicResource ButtonMaximize}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="{DynamicResource ButtonMaximizeHover}"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</s:TitleBarButton>
<s:TitleBarButton x:Name="Close" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="4">
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{DynamicResource ButtonClose}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="{DynamicResource ButtonCloseHover}"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</s:TitleBarButton>
<AdornerDecorator Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="4">
<ContentPresenter />
</AdornerDecorator>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here is the code of the dashboard window where I am attempting to place fitted elements in their correct grid slots (those created by the dashboard window). The grid created blow looks as though all of the rows and columns are in the right spot, and their elements should simply fit, but they have strange margins. So the StudySessionPanel(which is 128x234) should fit perfectly within row 1, col 2, but as you can see it require colsaps, margins and other junk in order to place it at the correct location.
Title="Dashboard"
Style="{DynamicResource DefaultWindowStyle}" mc:Ignorable="d"
Height="840" Width="1024">
<Grid Name="DashboardGrid" Width="1024" Height="840">
<Grid.RowDefinitions>
<RowDefinition Height="63" />
<RowDefinition Height="128" />
<RowDefinition Height="234" />
<RowDefinition Height="18"/>
<RowDefinition Height="380" />
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="15.25" />
<ColumnDefinition Width="234" />
<ColumnDefinition Width="15.25" />
<ColumnDefinition Width="280" />
<ColumnDefinition Width="15.25" />
<ColumnDefinition Width="417" />
<ColumnDefinition Width="15.25" />
<ColumnDefinition Width="16" />
</Grid.ColumnDefinitions>
<cc:PanelStudySession x:Name="StudySessionPanel" Grid.ColumnSpan="3" Margin="15,66,16,62" Grid.RowSpan="2" Grid.Row="1">
</cc:PanelStudySession>
<cc:PanelPerformance x:Name="PerformancePanel" Grid.Column="3" Grid.ColumnSpan="4" Margin="0,66,10,62" Grid.Row="1" Grid.RowSpan="2">
</cc:PanelPerformance>
<cc:PanelProgress x:Name="ProgressPanel" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,190,10,62" Grid.Row="2" Grid.RowSpan="3">
</cc:PanelProgress>
<cc:PanelHistory x:Name="HistoryPanel" Grid.Column="5" Grid.ColumnSpan="2" Margin="0,190,15,62" Grid.Row="2" Grid.RowSpan="3">
</cc:PanelHistory>
</Grid>
This is the image with the margins, and row/col spans
Ignoring the designer the elements sort of line up, though some of them get chopped. It looks the same when ran as it does in the presenter.
Your StudySessionPanel is actually being put in rows 1-2 (Row=1, RowSpan=2) and columns 0-2 (no column and ColumnSpan=3). Just set Grid.Row and Grid.Column if you want to put it in a cell.

Resources