Blurry Adorner WPF Xaml - c#

I cannot for the life of me figure this out, using the same control template I get a blurry Adorner on one Element in my panel:
Control Template:
<ControlTemplate x:Key="validationErrorTemplateBubble" >
<DockPanel >
<Grid DockPanel.Dock="Bottom" Margin="10,0,0,0" >
<Grid.Effect>
<DropShadowEffect ShadowDepth="2" Direction="315" />
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Margin="0,-1.6,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE7E8F1" Offset="1"/>
<GradientStop Color="White"/>
<GradientStop Color="#FFF3F4F6" Offset="0.472"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<WrapPanel VerticalAlignment="Center" Margin="5,5,10,5">
<Image Source="/Sesam;component/Modules/Images/wrongsmall.png" Height="15" Width="15" />
<TextBlock Foreground="Red" FontSize="12" Margin="5,0,0,0" Text="{Binding ElementName=ErrorAdorner, Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}" />
</WrapPanel>
<ContentPresenter Margin="5" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
<Path Data="M306.375,133.125L306.375,100.875L335.75,133.25" Stroke="Gray" Height="15" Fill="White" StrokeThickness="1" Stretch="Uniform" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<AdornedElementPlaceholder x:Name="ErrorAdorner" />
</DockPanel>
Non-Blury Text Box Code:
<TextBox BorderThickness="0" VerticalAlignment="Center" Width="150" Padding="3" Margin="8,0,0,0" Foreground="{StaticResource myDarkBlue}" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.encTypeValidation, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource validationErrorTemplateBubble}" HorizontalAlignment="Left" >
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.editClicked}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" Value="Visible" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
Blurry TextBox Code:
<Grid>
<WrapPanel>
<TextBox x:Name="tbox" Text="{Binding encTypeValidation, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Foreground="{StaticResource myTextBoxColor}" Validation.ErrorTemplate="{StaticResource validationErrorTemplateBubble}" PreviewMouseDown="tbox_PreviewMouseDown" Width="200" >
<TextBox.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding addBoxClicked}" />
</TextBox.InputBindings>
</TextBox>
</WrapPanel>
</Grid>
Something about the way it renders, the first (non blury) is within a "ListViewItem" Control Template, the other is a userControl..
Any ideas?
FIXED
Fixed by adding UseLayoutRounding="True" to parent Control ie: ContentControl!
Thank you Aybe!
<Grid Grid.Row="2" Background="{StaticResource myLightGrey}" >
<Border BorderBrush="{StaticResource myLightGrey}" BorderThickness="0,1,1,0">
<ContentControl x:Name="AddPanel" VerticalAlignment="Center" HorizontalAlignment="Center" UseLayoutRounding="True"/>
</Border>
</Grid>

Adding UseLayoutRounding="True" to the parent container control solves the rendering issue.

Related

Why control template triggers does not affect my buttons in documentviewer?

I wrote a documentviewer style (below) and I came into a problem with first two buttons - both of them, when disabled has lightgray-ish colour of background and gray foreground. How do I make them transparent when disabled? I tried to put transparency everywhere possible with no success. Those triggers at the bottom does not work. Thanks in advance.
<Style x:Key="{x:Type DocumentViewer}"
TargetType="{x:Type DocumentViewer}">
<Setter Property="Foreground"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DocumentViewer}">
<Border BorderThickness="0.4"
BorderBrush="White"
Focusable="False">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.Background>
<SolidColorBrush Color="Transparent" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ToolBar ToolBarTray.IsLocked="True" Height="50" Background="Transparent" Foreground="Transparent"
KeyboardNavigation.TabNavigation="Continue" BorderThickness="0.8" BorderBrush="White">
<StackPanel Orientation="Horizontal">
<Button Command="ApplicationCommands.Print" BorderThickness="0" Background="Transparent"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource Buttondefault}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Printer" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Print" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="ApplicationCommands.Copy" BorderThickness="0" Background="Transparent"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ContentCopy" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Copy" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Separator/>
<Button Command="NavigationCommands.IncreaseZoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ZoomIn" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Zoom In" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="NavigationCommands.DecreaseZoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ZoomOut" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Zoom Out" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Separator />
<Button Command="NavigationCommands.Zoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="100.0"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="PageLayoutFooter" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Actual Size" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToWidthCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="FitToPageOutline" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Fit To Width" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToMaxPagesAcrossCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="1" Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="PageLayoutMarginals" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Whole Page" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToMaxPagesAcrossCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="2" Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="TableSplitCell" Height="20" Width="20" Margin="0,5,0,0" RenderTransformOrigin="5,5"/>
<TextBlock Text="Two Pages" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
</StackPanel>
</ToolBar>
<ScrollViewer Grid.Row="1"
CanContentScroll="true"
HorizontalScrollBarVisibility="Auto"
x:Name="PART_ContentHost"
IsTabStop="true">
<ScrollViewer.Background>
<SolidColorBrush Color="Transparent"/>
</ScrollViewer.Background>
</ScrollViewer>
<ContentControl Grid.Row="2"
x:Name="PART_FindToolBarHost"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Background" Value="#623ed0"/>
<Setter Property="Foreground" Value="WhiteSmoke"/>
</Trigger>
<Trigger Property="Button.IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
<Trigger Property="Button.IsEnabled" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Strange layout issue MVVM .Net 4.7.2 App controls disappear

I’m building a MVVM app using .Net 4.7.2 that works like a wizard (based on https://www.codeproject.com/KB/WPF/InternationalizedWizard.aspx?display=Print), so no additional frameworks, just the RelayCommand class, a MainWindow.cs that hosts the Main view (the view that has navigation items of the wizard on the left side, and the right side area that hosts the subviews which display based on the stage of the wizard).
Mi issue is that one of my users is experiencing a very strange behaviour with the controls. This is a sample photo of what the application should look like:
And this is a sample photo of what happens to the user. Notice that the image on the bottom left disappears, the bar on the bottom left also disappears, the heading and top text have moved up and clipped inside the window, and the rest of the content in the right side disappears.
Similar to the base InternationalizedWizard App I placed the controls in a grid that has horizontal + vertical alignment set to stretch. The
<Border Background="White" Grid.Column="1" Grid.Row="0">
<ScrollViewer>
<HeaderedContentControl Content="{Binding Path=CurrentPage}" Header="{Binding Path=CurrentPage.DisplayName}" />
</ScrollViewer>
</Border>
I applied this style to the HeaderedContentControl:
<Style TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel Margin="2,0">
<Grid Margin="1,1,1,12" RenderTransformOrigin="0.5,0.5">
<Rectangle Fill="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Height="3" Margin="10,-4" Opacity="0.6" RadiusX="8" RadiusY="8" VerticalAlignment="Bottom" />
<ContentPresenter ContentSource="Header" TextBlock.FontSize="22" TextBlock.FontWeight="DemiBold" TextBlock.Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" OpacityMask="Black" />
<Grid.Effect>
<DropShadowEffect Opacity="0.1" />
</Grid.Effect>
<Grid.RenderTransform>
<RotateTransform Angle="0" />
</Grid.RenderTransform>
</Grid>
<Grid>
<Rectangle Fill="{TemplateBinding Background}" />
<ContentPresenter ContentSource="Content" />
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The scrollviewer only scrolls up and down if the content is large, but in this case the content should fit fine so as expected the user won't see the scrollviewer.
The image from the bottom left that strangely disappear was placed in the column 0, row 0 of the grid a custom margin so it remains in that area:
<Image Grid.Column="0" Grid.Row="0" Source="..\Assets\SplashLogo.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" Stretch="None" Margin="20,20,20,20"/>
The first page (e.g. Welcome) that displays has another grid with two
<Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="30" MaxHeight="60"/>
<RowDefinition Height="*" MinHeight="200"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{x:Static res:Strings.SomeText_Description}" FontSize="15" FontWeight="Light" Margin="20,0,20,0" TextWrapping="Wrap" />
<StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Label Content="{x:Static res:Strings.WelcomeView_SomeText}" FontSize="15" FontWeight="Light" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,20,0" />
<TextBox Text="{Binding Path=SomeInput, UpdateSourceTrigger=PropertyChanged}" Height="25" Width="200" FontSize="15" FontWeight="Light" HorizontalAlignment="Left">
<TextBox.InputBindings>
<KeyBinding Key="Enter" Command="{Binding MoveNextFromWelcomeCommand}" CommandParameter="{Binding Path=Text, RelativeSource={RelativeSource AncestorType={x:Type TextBox}}}" />
</TextBox.InputBindings>
</TextBox>
</StackPanel>
</Grid>
But the contents of the stack panel completely disappear of view.
Finally, the bottom area of the main view is created in a border like this one, which also completely disappears from view:
<Border Grid.Column="0" Grid.Row="1" Background="LightGray" Grid.ColumnSpan="2">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="5" Margin="4" FontSize="15" Text="{Binding Path=ReportStatus}" VerticalAlignment="Center" Visibility="{Binding Path=ShowReportStatus}" />
<!-- NAVIGATION BUTTONS -->
<Grid Grid.Column="2" Grid.Row="0" Grid.IsSharedSizeScope="True" HorizontalAlignment="Right" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="0" Command="{Binding Path=MovePreviousCommand}" Style="{StaticResource movePreviousButtonStyle}" />
<Button Grid.Column="2" Grid.Row="0" Command="{Binding Path=MoveNextCommand}" Style="{StaticResource moveNextButtonStyle}" />
<Button Grid.Column="3" Grid.Row="0" Command="{Binding Path=CancelCommand}" Style="{StaticResource cancelButtonStyle}" />
</Grid>
</Grid>
</Border>
I initially thought there could be an issue with the version of .NET or OS, but my users has the latest version of Windows 10 Enterprise (10.0.17134) and dual screen with 1: 3840x2160 2: 2560x1600. I have tried to replicate that on my own computer but everything works fine for me. I also tested the App in Windows 7 and it works with no issues.
I really don't understand what could be happening, does it have anything to do with the user's DPI settings or any accessibility feature?
EDIT:
To make things a bit easier, this is the full code of the main view's xaml:
<UserControl x:Class="MyCompany.MyAppName.App.View.MyAppView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyCompany.MyAppName.App.View"
xmlns:viewModel="clr-namespace:MyCompany.MyAppName.App.ViewModel"
xmlns:view="clr-namespace:MyCompany.MyAppName.App.View"
xmlns:res="clr-namespace:MyCompany.MyAppName.App.Assets"
xmlns:util="clr-namespace:MyCompany.MyAppName.App.Utils"
mc:Ignorable="d"
x:Name="configuratorControl" d:DesignHeight="600" d:DesignWidth="600"
>
<UserControl.Resources>
<util:PercentageConverter x:Key="percentageConverter"/>
<DataTemplate DataType="{x:Type viewModel:ObjectSelectionViewModel}">
<view:ObjectSelectionPageView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:CurrentObjectComponentsViewModel}">
<view:CurrentObjectComponentsView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:CurrentObjectOptionsViewModel}">
<view:CurrentObjectOptionsView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:SageFourViewModel}">
<view:SageFourView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:SageThreeViewModel}">
<view:SageThreeView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:ObjectViewModel}">
<view:MyNumberView/>
</DataTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Padding" Value="3.5,0" />
<Setter Property="Margin" Value="3.5" />
<Setter Property="MinWidth" Value="80" />
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Regular"/>
</Style>
<!-- This Style inherits from the Button style seen above. -->
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="moveNextButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_MoveNext}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsOnLastPage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.SageThreeView_Confirm}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsOnCreateSageThreePage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_CreateSageThree}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="cancelButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_Cancel}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsOnLastPage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_ExportPDF}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="movePreviousButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_MovePrevious}" />
</Style>
<!-- HEADERED CONTENT CONTROL STYLE -->
<Style TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel Margin="2,0">
<Grid Margin="1,1,1,12" RenderTransformOrigin="0.5,0.5">
<Rectangle Fill="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Height="3" Margin="10,-4" Opacity="0.6" RadiusX="8" RadiusY="8" VerticalAlignment="Bottom" />
<ContentPresenter ContentSource="Header" TextBlock.FontSize="22" TextBlock.FontWeight="DemiBold" TextBlock.Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" OpacityMask="Black" />
<Grid.Effect>
<DropShadowEffect Opacity="0.1" />
</Grid.Effect>
<Grid.RenderTransform>
<RotateTransform Angle="0" />
</Grid.RenderTransform>
</Grid>
<Grid>
<Rectangle Fill="{TemplateBinding Background}" />
<ContentPresenter ContentSource="Content" />
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="workflowStepTemplate">
<Border x:Name="bdOuter" BorderBrush="Black" BorderThickness="0,0,1,1" CornerRadius="12" Margin="1,1,1,12" Opacity="0.25" SnapsToDevicePixels="True">
<Border x:Name="bdInner" Background="White" BorderBrush="DarkBlue" BorderThickness="2,2,1,1" CornerRadius="12" Padding="2">
<TextBlock x:Name="txt" Margin="4,0,0,0" FontSize="15" FontWeight="Light" Text="{Binding Path=DisplayName}" />
</Border>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsCurrentPage}" Value="True">
<Setter TargetName="txt" Property="FontWeight" Value="SemiBold" />
<Setter TargetName="bdInner" Property="Background" Value="White" />
<Setter TargetName="bdOuter" Property="Opacity" Value="1" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</UserControl.Resources>
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}">
<Canvas x:Name="searchCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Panel.ZIndex="3" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}" Visibility="{Binding SearchBoxVisibility}">
<Grid Panel.ZIndex="4" Width="{Binding ActualWidth, ElementName=searchCanvas}" Height="{Binding ActualHeight, ElementName=searchCanvas}">
<StackPanel Panel.ZIndex="4" Orientation="Vertical" Width="270" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" >
<TextBlock Margin="5" FontSize="15" Text="Serial Number:" Width="100" Height="25" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Text="{Binding MyNumber, UpdateSourceTrigger=PropertyChanged}" Margin="5" Width="150" Height="25" />
</StackPanel>
<DockPanel HorizontalAlignment="Stretch">
<Button Margin="5" Content="Dismiss" Width="100" HorizontalAlignment="Left" Command="{Binding DismissSearchDraftCommand}"/>
<Button Margin="5" Content="Search" Width="100" HorizontalAlignment="Right" Command="{Binding StartSearchDraftCommand}"/>
</DockPanel>
</StackPanel>
<Rectangle Panel.ZIndex="3" Fill="LightBlue" Width="300" Height="100" />
</Grid>
<Rectangle Panel.ZIndex="2" Fill="LightGray" Opacity="0.4" Canvas.Left="0" Canvas.Top="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}" />
</Canvas>
<Grid Background="#11000000" Margin="1" Panel.ZIndex="2" IsEnabled="{Binding GridResultsEnabled}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="{Binding ActualHeight, ElementName=configuratorControl, Converter={StaticResource percentageConverter}, ConverterParameter=99.5}" Width="{Binding ActualWidth, ElementName=configuratorControl, Converter={StaticResource percentageConverter}, ConverterParameter=99.5}">
<Grid.BitmapEffect>
<BlurBitmapEffect Radius="{Binding GridBoxBlur}" KernelType="Box" />
</Grid.BitmapEffect>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<!-- Workflow step listing -->
<HeaderedContentControl Header="{x:Static res:Strings.MyAppView_HeaderSteps}">
<ItemsControl ItemsSource="{Binding Path=Pages}" ItemTemplate="{StaticResource workflowStepTemplate}" />
</HeaderedContentControl>
<Button FontSize="15" Style="{StaticResource HyperLinkButtonStyle}" Margin="20,20,20,140" VerticalAlignment="Bottom" HorizontalAlignment="Center" Content="{x:Static res:Strings.MyAppView_Button_Search_Full}" Command="{Binding Path=OpenSearchFullCommand}"/>
<Button FontSize="15" Style="{StaticResource HyperLinkButtonStyle}" Margin="20,20,20,170" VerticalAlignment="Bottom" HorizontalAlignment="Center" Content="{x:Static res:Strings.MyAppView_Button_Search_Draft}" Command="{Binding Path=OpenSearchDraftCommand}"/>
<Button Margin="20,295,20,20" Command="{Binding Path=StartAgainCommand}" Content="{x:Static res:Strings.SageThreeView_StartAgain}" VerticalAlignment="Top" />
<Image Grid.Column="0" Grid.Row="0" Source="..\Assets\SplashLogo.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" Stretch="None" Margin="20,20,20,20"/>
<!-- CURRENT PAGE AREA -->
<Border Background="White" Grid.Column="1" Grid.Row="0">
<ScrollViewer>
<HeaderedContentControl Content="{Binding Path=CurrentPage}" Header="{Binding Path=CurrentPage.DisplayName}" />
</ScrollViewer>
</Border>
<Border Grid.Column="0" Grid.Row="1" Background="LightGray" Grid.ColumnSpan="2">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="5" Margin="4" FontSize="15" Text="{Binding Path=SageThreeStatus}" VerticalAlignment="Center" Visibility="{Binding Path=ShowSageThreeStatus}" />
<!-- NAVIGATION BUTTONS -->
<Grid Grid.Column="2" Grid.Row="0" Grid.IsSharedSizeScope="True" HorizontalAlignment="Right" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="0" Command="{Binding Path=MovePreviousCommand}" Style="{StaticResource movePreviousButtonStyle}" />
<Button Grid.Column="2" Grid.Row="0" Command="{Binding Path=MoveNextCommand}" Style="{StaticResource moveNextButtonStyle}" />
<Button Grid.Column="3" Grid.Row="0" Command="{Binding Path=CancelCommand}" Style="{StaticResource cancelButtonStyle}" />
</Grid>
</Grid>
</Border>
</Grid>
</Canvas>
</UserControl>

WPF XAML returning PositiveInfinity as DesiredSize with vitalized warp panel

I needed to implement a third party solution for a vitalizing warp panel. The first two I tried didn't work because of this error message:
' ...should not return PositiveInfinity as its DesiredSize, even if
Infinity is passed in as available size.'
So next I went to a commercial solution which gave me the exact same error. So clearly there is something wrong with my code. But no matter what I try, the problem persists. To note, I tried the last solution with a basic example and that did indeed work.
I presume that one of my controls are the problem, perhaps needing to stipulate the dimensions, but, I have tried that on every relevant control. Below is the code. It is a ListBox inside a Grid using a data template.
<Grid x:Name="MainGrid" Background="#222">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" MinWidth="200" MaxWidth="400" />
<ColumnDefinition Width="*" MinWidth="200" />
<ColumnDefinition Width="400" MinWidth="270" MaxWidth="600" />
</Grid.ColumnDefinitions>
...
<!--#region Main Library Column-->
<ListBox x:Name="LibraryBox"
Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="4"
Margin="20,10,20,10"
BorderBrush="Transparent"
Background="#1e1e1e"
ItemsSource="{Binding}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
IsSynchronizedWithCurrentItem="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.CacheLengthUnit="Page"
VirtualizingPanel.CacheLength="1,2"
VirtualizingPanel.VirtualizationMode="Standard"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.IsDeferredScrollingEnabled="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionMode="Extended"
SelectionChanged="LibraryBox_SelectionChanged"
MouseDoubleClick="LibraryBox_MouseDoubleClick">
<ListBox.Resources>
<!--#region scrollbar style-->
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#990000"/>
<Setter Property="Width" Value="25"/>
</Style>
<!--#region Not working...-->
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="AliceBlue"/>
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Red" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--#endregion-->
<!--#endregion-->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Red"/>
</ListBox.Resources>
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Edit" Click="ContextMenuItemEdit_Click"/>
<MenuItem Header="ComicVine Scraper" Click="MenuItemScraper_Click"/>
<Separator/>
<MenuItem Header="Delete" Click="ContextMenuItemDelete_Click"/>
</ContextMenu>
</ListBox.ContextMenu>
<!--#region Group Style-->
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"
FontWeight="Bold"
Foreground="#dbdbdb"
FontSize="16"
FontFamily="Cordia New"
VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ItemCount}"
FontSize="16"
Foreground="#dbdbdb"
FontStyle="Italic"
Margin="10,0,0,0"
FontFamily="Cordia New"
VerticalAlignment="Bottom" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
<!--#endregion-->
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Viewbox Height="100" Width="70" Margin="2">
<Viewbox.LayoutTransform>
<ScaleTransform ScaleX="{Binding Value, ElementName=ZoomSlider}"
ScaleY="{Binding Value, ElementName=ZoomSlider}"/>
</Viewbox.LayoutTransform>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="32"/>
</Grid.ColumnDefinitions>
<!--This is for thumbnails-->
<Image x:Name="coverImage"
Grid.Column="0"
Grid.Row="0"
Source="{Binding CoverPath, Converter={StaticResource UriToBitmapConverter}, IsAsync=True}"/>
<Rectangle x:Name="ReadMarkerBottom"
Grid.Column="1"
Grid.Row="1"
Margin="-16,0,0,0"
Fill="#fff"
Width="32"
Height="32"
Loaded="CoverImage_Loaded"/>
<Rectangle x:Name="ReadMarkerTop"
Grid.Column="1"
Grid.Row="1"
Margin="-16,0,0,0"
Fill="#000"
Width="30"
Height="30"
Loaded="CoverImage_Loaded"/>
</Grid>
</Viewbox>
<TextBlock TextTrimming="CharacterEllipsis"
TextAlignment="Center"
Width="120"
Foreground="#dbdbdb"
Background="Transparent"
Margin="0,0,0,5"
Loaded="Text_Loaded"
FontFamily="Cordia New"
FontWeight="Bold">
</TextBlock>
<TextBlock TextTrimming="CharacterEllipsis"
TextAlignment="Center"
Width="120"
Foreground="#dbdbdb"
Background="Transparent"
Margin="0,0,0,5"
Loaded="IssueNumer_Loaded"
FontFamily="Cordia New"/>
<TextBlock TextTrimming="CharacterEllipsis"
TextAlignment="Center"
Width="120"
Foreground="#dbdbdb"
Background="Transparent"
Margin="0,0,0,5"
Loaded="CountStack_Loaded"
FontFamily="Cordia New"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<extendedPanelControls:BinaryVirtualizingWrapPanel
AutoUpdateViewportOnDetectingTransactionalUpdatesToDataSource="True"
ItemPositioningMode="Greedy"
IsItemsHost="True"
Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<!--#endregion-->
The answer was to set the MaxHeight on the <ItemsPresenter /> inside the GroupStyle so it new it was not going to go on forever

How do I add a footer row in a WPF datagrid?

How Do I Add a footer row in WPF datagrid? I had to add a row in a WPF datagrid for the sum of each column, I don't want to use any dll or telerik and some things like that only use Microsoft components to do this. I'm trying to do it this way:
<Style TargetType="{x:Type DataGrid}">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource BorderLightColor}" Offset="0" />
<GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="ScrollViewer.PanningMode" Value="Both" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border x:Name="border"
SnapsToDevicePixels="True"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ControlLightColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="DG_ScrollViewer" Focusable="false" Background="Black">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Focusable="false"
Command="{x:Static DataGrid.SelectAllCommand}"
Style="{DynamicResource {ComponentResourceKey
ResourceId=DataGridSelectAllButtonStyle,
TypeInTargetAssembly={x:Type DataGrid}}}"
Visibility="{Binding HeadersVisibility,
ConverterParameter={x:Static DataGridHeadersVisibility.All},
Converter={x:Static DataGrid.HeadersVisibilityConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
Width="{Binding CellsPanelHorizontalOffset,
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
<DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter"
Grid.Column="1"
Visibility="{Binding HeadersVisibility,
ConverterParameter={x:Static DataGridHeadersVisibility.Column},
Converter={x:Static DataGrid.HeadersVisibilityConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
Grid.ColumnSpan="2"
Grid.Row="1"
CanContentScroll="{TemplateBinding CanContentScroll}" />
<ScrollBar x:Name="PART_VerticalScrollBar"
Grid.Column="2"
Grid.Row="1"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Maximum="{TemplateBinding ScrollableHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay,
RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="This is footer!"/>
<Grid Grid.Column="1" Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset,
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollBar x:Name="PART_HorizontalScrollBar"
Grid.Column="1"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}"
Maximum="{TemplateBinding ScrollableWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</Style.Triggers>
</Style>
I also tried adding a grid instead of textblock, but when resizing datagrid columns, they can't resize and looks very ugly.
Try this.
<ScrollViewer VerticalAlignment="Top" HorizontalScrollBarVisibility="Auto">
<StackPanel>
<DataGrid ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<DataGrid.Columns>
<DataGridTextColumn x:Name="Header1" Header="Header1"></DataGridTextColumn>
<DataGridTextColumn x:Name="Header2" Header="Header2"></DataGridTextColumn>
<DataGridTextColumn x:Name="Header3" Header="Header3"></DataGridTextColumn>
</DataGrid.Columns>
<TextBlock></TextBlock>
<TextBlock></TextBlock>
</DataGrid>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Grid Width="{Binding ElementName=Header1,Path=ActualWidth}">
<TextBlock Margin="5,0,0,0" Text="Footer1"></TextBlock>
</Grid>
<Grid Width="{Binding ElementName=Header2,Path=ActualWidth}">
<TextBlock Text="Footer2" Margin="5,0,0,0"></TextBlock>
</Grid>
<Grid Width="{Binding ElementName=Header3,Path=ActualWidth}">
<TextBlock Text="Footer3" Margin="5,0,0,0"></TextBlock>
</Grid>
</StackPanel>
</StackPanel>
</ScrollViewer>
Result
Answer By Heena Patil has some issues.
When the layout of the DataGrid changes, like when the scrollbar is visible or window resized. Then the position of footer changes.
The concept is to set the margin-left and width of the footer TextBlocks
when the layout is updated.
<DataGrid x:Name="DGSalesINvoice" LayoutUpdated="DG_LayoutUpdated">
<DataGridTextColumn x:Name="DG_COL_IdSalesInvoice" Width="Auto" Header="ID" Binding="{Binding IdSalesInvoice}" />
<DataGridTextColumn x:Name="DG_COL_CustomerName" Width="*" Header="Customer" Binding="{Binding CustomerName}" />
<DataGridTemplateColumn x:Name="DG_COL_SalesInvoiceAmount" Width="Auto" Header="Invoice Amount">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment="Right" Text="{Binding SalesAmount}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="DG_COL_EditBtn" Width="50">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btnEditCompany" Tag="{Binding IdSalesInvoice}">Edit</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid>
<StackPanel Orientation="Horizontal" Grid.Row="2" Background="GhostWhite">
<TextBlock x:Name="lblTotal" TextAlignment="Right" FontWeight="Bold">Total</TextBlock>
<TextBlock x:Name="lblTotalSalesInvoiceAmount" TextAlignment="Right" FontWeight="Bold">0.00</TextBlock>
</StackPanel>
private void DGSalesINvoice_LayoutUpdated(object sender, EventArgs e)
{
Thickness t = lblTotal.Margin;
t.Left = (DGSalesINvoice.Columns[0].ActualWidth + 7);
lblTotal.Margin = t;
lblTotal.Width = DGSalesINvoice.Columns[1].ActualWidth;
lblTotalSalesInvoiceAmount.Width = DGSalesINvoice.Columns[2].ActualWidth;
}

Dotted Horizontal Grid Lines in WPF DataGrid

Is there a way to have a dotted line on the horizontal grid lines in WPF datagrid? I have googled everywhere and cannot seem to find a concrete way of doing so. One solution that may solve this is setting the Datagrid.RowStyle. I have tried this and it causes error. I have binded my datagrid to a datatable. 2 columns are just text and the 3rd one is an image column. For this columns, I used DataGridTemplateColumn. Textblock and Image. I hope you can help me guys...If you want a sample of my code here it is.
<StackPanel>
<dg:DataGrid Name="questionList"
HeadersVisibility="None"
AutoGenerateColumns="False"
Background="White"
Margin="42,32,43,0"
BorderThickness="0"
GridLinesVisibility="Horizontal"
CanUserAddRows="False"
HorizontalGridLinesBrush="#FFCCCCCC"
MaxHeight="549"
Cursor="Hand"
PreviewMouseLeftButtonUp="questionnaireList_PreviewMouseLeftButtonUp">
<dg:DataGrid.CellStyle>
<Style TargetType="{x:Type dg:DataGridCell}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</dg:DataGrid.CellStyle>
<dg:DataGrid.RowStyle>
<Style TargetType="{x:Type dg:DataGridRow}">
<Setter Property="Background" Value="{Binding MyImage, Converter={x:Static my:StatusColorConverter.instance}}" />
</Style>
</dg:DataGrid.RowStyle>
<dg:DataGrid.Columns>
<dg:DataGridTemplateColumn Width="69*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Margin="12,16,0,17"
FontSize="18"
Foreground="#0891F1"
Text="{Binding Path=Number}"
TextWrapping="Wrap"/>
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
<dg:DataGridTemplateColumn Width="601*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock FontSize="16" Foreground="#666666"
Text="{Binding Path=Desc}"
TextWrapping="Wrap"
TextAlignment="Justify"
Margin="0,16,0,17" />
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
<dg:DataGridTemplateColumn Width="117*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Path=Imgs}"
Stretch="None"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Margin="0,16,18,17" />
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
</dg:DataGrid.Columns>
</dg:DataGrid>
</StackPanel>
The easiest way to do this is to simply use gradient brushes with absolute mapping modes:
<DataGrid ItemsSource="{Binding People}">
<DataGrid.HorizontalGridLinesBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="3,0" MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</DataGrid.HorizontalGridLinesBrush>
<DataGrid.VerticalGridLinesBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,3" MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</DataGrid.VerticalGridLinesBrush>
<DataGrid.Columns>
<DataGridTextColumn Header="First Name" Binding="{Binding FirstName}"/>
<DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
</DataGrid.Columns>
</DataGrid>
Result:
You can disable the Horizontal Grid Lines which are drawn in code by specifying GridLinesVisibility="Vertical" in the DataGrid. You could then re-template DataGridRow and add the dashed line at the end of each row
Looks like this:
<DataGrid GridLinesVisibility="Vertical">
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
<DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
<Path Grid.Row="2" Grid.ColumnSpan="2"
Data="M0,0.5 L1,0.5"
Stretch="Fill" Stroke="Black" StrokeThickness="1"
StrokeDashArray="1.0 2.0"/>
</SelectiveScrollingGrid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.RowStyle>
<!-- ... -->
</DataGrid>
Edit: Here is the Template for the 3.5 DataGrid in the toolkit
<Custom:DataGrid GridLinesVisibility="Vertical">
<Custom:DataGrid.RowStyle>
<Style TargetType="Custom:DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Custom:DataGridRow}">
<Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Custom:SelectiveScrollingGrid>
<Custom:SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Custom:SelectiveScrollingGrid.ColumnDefinitions>
<Custom:SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Custom:SelectiveScrollingGrid.RowDefinitions>
<Custom:DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Custom:DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" Visibility="{TemplateBinding DetailsVisibility}">
<Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation>
<Binding Path="AreRowDetailsFrozen" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:DataGrid}}">
<Binding.ConverterParameter>
<Custom:SelectiveScrollingOrientation>Vertical</Custom:SelectiveScrollingOrientation>
</Binding.ConverterParameter>
</Binding>
</Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation>
</Custom:DataGridDetailsPresenter>
<Custom:DataGridRowHeader Grid.RowSpan="2" Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<Custom:DataGridRowHeader.Visibility>
<Binding Path="HeadersVisibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:DataGrid}}">
<Binding.ConverterParameter>
<Custom:DataGridHeadersVisibility>Row</Custom:DataGridHeadersVisibility>
</Binding.ConverterParameter>
</Binding>
</Custom:DataGridRowHeader.Visibility>
</Custom:DataGridRowHeader>
<Path Grid.Row="2" Grid.ColumnSpan="2"
Data="M0,0.5 L1,0.5"
Stretch="Fill" Stroke="Black" StrokeThickness="1"
StrokeDashArray="1.0 2.0"/>
</Custom:SelectiveScrollingGrid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Custom:DataGrid.RowStyle>
<!-- ... -->
</Custom:DataGrid>

Categories