Validation Error Template Adorner is cut insight a ScrollViewer - wpf

i have the following problem. as far a i put my Textboxes in a scrollviewer my ValidationError Adorner get cut by the ScrollViewer. i found some answers to Adorner and ScrollViewer which say i need to retemplate my scrollviewer and add an adornerdecorator. but this makes no sense to me and it doesnt help either.
as far as i know should the Validation Adorner rendered in the nearest AdornerDecorator. the ScrollViewer by default has no AdornerDecorator. so does anybody know why my ValidationAdorner get cut?
I also looking for a solution :)
EDIT: it seems the ScrollContentPresenter which comes from the ScrollViewer Template cause the problem, because it has a AdornerLayer by default. Any ideas how to solve my issue?
EDIT2:
is there a way to create a new ScrollConntentPresenter Template without a Adornerlayer?
or is there a way to remove a the Adornerlayer from the VisualTree?
or can i force the Adornerlayer to render in a" higher/most top" AdornerLayer?
or can i have Scrolling Content without a ScrollViewer?
here is my xaml:
<UserControl>
<AdornerDecorator>
<Grid x:Name="RootControl">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="main" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="InputBorder" Grid.Column="0">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="InputContainer" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
...some rows...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
...some columns...
</Grid.ColumnDefinitions>
<TextBox .../><!--this Validation Adorner get cut by scrollviewer-->
</Grid>
</ScrollViewer>
</Border>
</Grid>
</Grid>
</AdornerDecorator>
</UserControl>
here is my Validation Template:
<ControlTemplate x:Key="ValidationTemplate" >
<DockPanel>
<AdornedElementPlaceholder Name="MyAdornedElement" />
<Grid>
<Border Background="{StaticResource BrushError}" Margin="3,0,0,0" x:Name="ErrorControl" BorderBrush="White" BorderThickness="1">
<TextBlock Margin="10,3,5,2"
Text="{Binding ElementName=MyAdornedElement,Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}"
Visibility="{Binding ElementName=MyAdornedElement,Path=AdornedElement.Visibility}"
Foreground="White" FontWeight="Bold">
</TextBlock>
</Border>
<Path x:Name="path" Margin="3,0,0,0" Data="M 0,10 L 10,0 " Fill="{StaticResource BrushError}"
StrokeThickness="2" Stroke="White"
/>
</Grid>
</DockPanel>
</ControlTemplate>

the behavior is intended. A ScrollViewer is able to hide some of it's contents (ie the content lying in the extent). Showing an Adorner for such content that doesn't get clipped, results in a strange UI.
What you should be able to do in the ValidationTemplate though is putting the Grid element inside a Popup control. Please try that and report if it worked.

Related

Issue with WPF WrapPanel inside a ScrollViewer

There are a number of similar questions on SO but so far I have not been able to resolve my problem using them.
I have a bunch of Controls inside a WrapPanel and the WrapPanel is inside a ScrollViewer. The ScrollViewer is inside a Grid.
I am trying to get all the <Border> controls in the WrapPanel to have an Orientation of 'Vertical' (so that they flow down and when there is no more space left vertically they wrap horizontally) with a HorizontalScrollBar that appears when there is no more space left Horizontally.
My code so far is as follows:
<Grid x:Name="configGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Width="{Binding ElementName=configGrid, Path=ActualWidth}" Height="{Binding ElementName=configGrid, Path=ActualHeight}">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical" x:Name="ConfigWrapPanel" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}">
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="General">
// some controls here
</Expander>
</Border>
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="Another Block">
// some controls here
</Expander>
</Border>
// many more <border> blocks here....
</WrapPanel>
</ScrollViewer>
</Grid>
This almost works as expected, the various content flows vertically and when there is not enough room at the bottom it moves up and right and starts at the top again. But I never get any horizontal scrollbars and the controls just disappear off the right of the screen.
I'm sure this is something really simple I'm missing but I can't quite figure it out.
As a bit of further info, the various Border controls and sub elements are all of dynamic width and height (which is why I opted for a vertical orientation WrapPanel rather than Horizontal)
Any help would be greatly appreciated.
You have to remove the Width from your WrapPanel.
That width wants to stretch to infinity, which prevents the ScrollViewer from corrent measuring the boundaries of the WrapPanel resulting in never showing the ScrollBar.
Code below shows a working example:
<Grid x:Name="configGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Height="{Binding ElementName=configGrid, Path=ActualHeight}">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical" x:Name="ConfigWrapPanel" >
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="General">
// some controls here
</Expander>
</Border>
<Border BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="2" Margin="10">
<Expander IsExpanded="True" BorderThickness="0" Header="Another Block">
// some controls here
</Expander>
</Border>
</WrapPanel>
</ScrollViewer>
</Grid>

WPF Scrollviewer not working with dynamic height

Trying to add a Scrollviewer to a TextBlock so that users can scroll down the contents, which are often rather longer than the available screen real-estate.
Apologies for what's probably a dumb question: I can see there's lots of topics about this, and that the problem is usually a fixed height somewhere, but I'm struggling to see which element is causing the problem in my XAML:
<Popup StaysOpen="True" Placement="Center" IsOpen="{Binding SummaryOpen}" PlacementTarget="{Binding ElementName=Areas}">
<Border Background="LightGray" BorderBrush="Black" Padding="5" BorderThickness="1">
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="350" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label Content="{Binding Name}" />
<Label Content=": " />
<Label Content="{Binding Description}" />
</StackPanel>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="1">
<StackPanel Background="White" Margin="-1,1,1,-1">
<!-- this is the rogue element -->
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Text="{Binding Summary}" TextWrapping="Wrap" />
</ScrollViewer>
</StackPanel>
</Border>
</Grid>
</Border>
</Popup>
The ScrollViewer appears, but never contains an actual scroll bar, regardless of how much content there is in the TextBlock.
If someone could explain where the problem is and how you fix it, I'd be most appreciative.
The rogue element is actually the parent StackPanel -- that panel isn't "fixed height" per se, but it doesn't work as a parent of a ScrollViewer. The reason is that it reports its available height as infinite, so the child ScrollViewer thinks it can extend as far as its children require, and so it doesn't need to scroll.
It looks like you could just as easily use a Border, or a Grid, either of which will limit their height to the parent height and thus fix the issue:
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="1">
<Border Background="White" Margin="-1,1,1,-1">
<!-- this is the rogue element -->
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Text="{Binding Summary}" TextWrapping="Wrap" />
</ScrollViewer>
</Border>
</Border>

Border Styling applied to all the child elements recursively

I am new to WPF and need your help in resolving my styling issue.
I have applied border styling to GRID as below
<Border CornerRadius="5" BorderBrush="Gainsboro" BorderThickness="1,1,0,0" Name="border1" Margin="90,54,20,50" >
<Border BorderBrush="Gray" CornerRadius="5" BorderThickness="0,0,1,1" >
<Border.Effect>
<DropShadowEffect BlurRadius="10" Direction="-50" ShadowDepth="7" />
</Border.Effect>
<Border.Child>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="356*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="446*" />
</Grid.ColumnDefinitions>
<TextBox Name="TB1" Style="{StaticResource CustomTextBoxStyle}" Grid.Column="1" Margin="46,79,400,277" Grid.Row="1" />
<ComboBox Height="24" Name="comboBox1" Width="110" Grid.Column="1" Margin="304,86,232,276" Grid.Row="1" />
</Grid>
</Border.Child>
</Border>
</Border>
Then I have placed text box and combo box in the grid with custom styling.
The problem is parent GRID's border style is applied to child TEXTBOX along with its own custom style properties.
Could you please help me out in this?
Thanks
Bharat
As per MSDN doucment -
When a BitmapEffect is applied to a layout container, such as
DockPanel or Canvas, the effect is applied to the visual tree of the
element or visual, including all of its child elements.
But, there is a workaround as described here and here to have another border with same position but without the effect, that would resolve the problem -
<Grid>
<Border Margin="10" BorderBrush="Red" BorderThickness="1">
<Border.Effect>
<DropShadowEffect Color="Gray"/>
</Border.Effect>
</Border>
<Border Margin="10">
<!-- controls -->
</Border>
</Grid>

Wrap Border around content with WPF

I have a Grid defined in my WPF application. I want to wrap a Border around the Grid itself. My problem is, the Border is filling the area available to the parent area. Because this, the Border is huge, but my content is small. My XAML is defined as follows:
<Grid>
<Border CornerRadius="0,0,2,2" BorderBrush="Black" BorderThickness="3" Margin="4">
<Grid HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Path=Description}" />
<TextBlock Text="{Binding Path=Disclaimer}" />
</Grid>
</Border>
</Grid>
What am I doing wrong? How do I fix this?
Thanks!
you have the border inside your grid. do it like this <Border><Grid>...</Grid></Border>

Centering a WPF control

I have a window where I add a new UserControl to (with an image), I simply want to center the control in the middle of the screen (both vertically and horizontally). I can only get the vertical one to work. I'm gonna swap content in the DockPanel from my CodeBehind and want to show this startup screen before I start doing my slideshow UI, this means that the content is set from the CodeBehind.
My Window:
<Window x:Class="GreenWebPlayerWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="512" Width="853" WindowStyle="None" WindowState="Maximized" WindowStartupLocation="CenterScreen">
<DockPanel Width="Auto" Height="Auto" Name="TransitionContainer" Background="Black" Margin="0" LastChildFill="True"></DockPanel>
</Window>
My UserControl:
<UserControl x:Class="GreenWebPlayerWPF.FrontPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel Background="Black">
<Image Name="image1" Stretch="None" Source="/GreenWebPlayerWPF;component/gw.png" />
</DockPanel>
</UserControl>
Please note that I'm using maximized/full screen.
Use a Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Replace with your UserControl -->
<Button Content="Foo" Grid.Column="1" Grid.Row="1"/>
</Grid>
You can dock it inside your DockPanel (if you must have a DockPanel there) to stretch. And, of course, while the above is all markup, you can just as easily create such a grid from code.
I keep running into this problem when trying to center elements on the page.
The problem with the StackPanel is that HorizontalAlignment has no effect when the Orientation is Horizontal and VerticalAlignment no effect when Orientation is Vertical. So you keep banging your head trying to set values with no effect. It is not illogical that it works this way but it would be good if this was reported as an error.
The solution I found is to have two imbricated StackPanels one centered horizontally and the other vertically as shown below. Finding the size of the parent is needed to size the intermediate panel otherwise it would be flat and its content hidden - an absolute value would work as well. Although not a panacea itis a bit less verbose than using a grid.
<StackPanel Background="Bisque" Orientation="Vertical" Width="300" Height="300" >
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal"
Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=StackPanel}, Path=ActualHeight}">
<StackPanel VerticalAlignment="Center" Width="200" Height="60" Background="Blue">
</StackPanel>
</StackPanel>
</StackPanel>
It's quite an old one, but centring a control is now as simple as:
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Height="350" Width="600">
<TextBox />
</StackPanel>
</Grid>

Resources