Button Border clipped in WPF with 125% DPI Setting - wpf

When I use 125% DPI setting in Windows, sometimes a button border is not rendered. It seems to depend on the size and position, maybe also the parent element of a button:
In my app, I can also see in the WPF designer that a parent border seems to be too small in size, though the button itself is larger. Maybe the measure process is somehow wrong:
I tried changing UseLayoutRounding for the whole window, also changing SnapsToDevicePixels does not help.
DPI Awareness is set in the manifest.
Does anyone know how to fix this for the entire application?
Thats the code in a default Wpf Window Application (I can't reproduce the problem right now, but the problem persists in my application):
<Window x:Class="WpfApp3.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"
mc:Ignorable="d"
Title="MainWindow"
SizeToContent="WidthAndHeight">
<StackPanel>
<GroupBox>
<GroupBox.Header>
<Button Width="20"
Height="22"
Content="X" />
</GroupBox.Header>
</GroupBox>
<Button Width="20"
Height="22"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Content="X" />
</StackPanel>
</Window>

Related

WPF: Textblock text in Popup goes outside of the main window

In my example wpf app I've added one button and one popup to the window. The button is in the bottom right corner and the popup has set "PlacementTarget" property to it and "Placement" set to top. The popup consists of one very long textblock.
What I expect this popup will behave is not to go outside of the window and therefore automatically set his "HorizontalOffset" to the appropriate value, but the popup behaves against my intentions.
Here's my xaml file:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1" x:Name="window" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:Converters x:Key="Converters"/>
</Window.Resources>
<Grid>
<Button x:Name="button" Content="Button" VerticalAlignment="Bottom" Width="75" HorizontalAlignment="Right"/>
<Popup Placement="Top" PlacementTarget="{Binding ElementName=button, Mode=OneWay}" IsOpen="True">
<TextBlock TextWrapping="Wrap" Text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" Background="White"/>
</Popup>
</Grid>
Do anyone know how to fix it?
I've read that this should be default popup behavior to take care of going out of the boundaries, but not in my case. Thanks in advance.
Have you tried to set the width of the Popup or Textblock ?
Sorry, I can't write this poor answer as a comment..

Window that is supposed to be fullscreen in WPF touchscreen application is moving when inner listbox is scrolled

I am writing a GUI application to run on a touchscreen device using VB.NET and WPF--it must be full screen at all times, like a kiosk app; the window must not be able to resize or move in any way. The window contains a ListBox that users can currently scroll through by dragging across the list. The problem I'm seeing is that when the user drags across the list, the whole window moves a bit, exposing the desktop underneath, then springs back into place once the user stops dragging. I have not been able to figure out how to keep the window stationary while still allowing users to drag across the ListBox to view all list items. Here is a somewhat simplified version of my code:
<Window
x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
WindowStyle="None"
WindowState="Maximized"
WindowStartupLocation="CenterScreen"
KeyboardNavigation.TabNavigation="None"
Topmost="True"
Focusable="False"
ResizeMode="NoResize"
ShowInTaskbar="False"
MaxHeight="1080px"
MaxWidth="1920px">
<Grid>
<ListBox
x:Name="docList"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
BorderThickness="0">
<TextBlock Text="Item1" />
<TextBlock Text="Item2" />
<TextBlock Text="Item3" />
<TextBlock Text="Item4" />
<TextBlock Text="Item5" />
<TextBlock Text="Item6" />
</ListBox>
</Grid>
</Window>
I believe that if you handle the OnManipulationBoundaryFeedback(object sender, TouchEventArgs e) event on the listbox, and set the e.Handled property true, that should prevent the "bounce" of the application window.
It may also be possible (I hadn't thought of it until just now) to handle the event at the Window level, since it is a bubbling event, to mitigate the chance of any other controls causing the same behaviour.

How to set up Avalon docking manager to resize like VS?

I am using Avalon in my WPF app. I want a window similar to that of Visual Studio, Tools on the left, then the documents in the middle and the Properties on the right. I managed to do that with this code:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1" Height="600" Width="800">
<Grid>
<ad:DockingManager x:Name="dockManager" RenderTransformOrigin="0,0">
<ad:ResizingPanel Orientation="Vertical">
<ad:ResizingPanel Orientation="Horizontal" >
<ad:DockablePane>
<ad:DockableContent Title="Toolbox" Width="100">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
<ad:DocumentPane x:Name="documentsHost" OverridesDefaultStyle="True">
<ad:DocumentContent Title="File1.doc">
<RichTextBox/>
</ad:DocumentContent >
<ad:DocumentContent Title="File2.doc">
<RichTextBox/>
</ad:DocumentContent >
</ad:DocumentPane>
<ad:DockablePane>
<ad:DockableContent Title="Project Explorer">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
</ad:ResizingPanel>
<ad:DockablePane>
<ad:DockableContent Title="Output">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
</ad:ResizingPanel>
</ad:DockingManager>
</Grid>
</Window>
The problem is that when I resize any of them, they all resize to keep their proportion. This is not what I want, I want it to be like VS where just the document window in the middle resizes with.
I would appreciate any help since I have been fighting with this for a few days now :(
Funny, because I started with the Avalon Tutorial from there and replaced the contents for the window with your XAML (very similar by the way). And the problem you describe does not happen.
Then I realized that the tutorial uses AvalonDock 1.1.1692, while the latest release is 1.1.2691 and has the behaviour you describe.
A look at the source code shows an attached property defined by ResizingPanel called ResizeWidth, which is 1* by default => the auto resize.
If you change the first DockablePane like this:
<ad:DockablePane ad:ResizingPanel.ResizeWidth="100" >
You get the behaviour you wanted.
It's never great to use hard-coded widths, so I changed it to
<ad:DockablePane ad:ResizingPanel.ResizeWidth="{Binding ElementName=dc, Path=Width}" >
after naming the inner DockableContent dc

WPF Textbox & Borders - curious resizing behavior

The following XAML produces a window with strange behavior around the textbox:
<Window x:Class="WpfSandbox.CuriousExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CuriousExample" Height="300" Width="300">
<DockPanel Margin="15">
<TextBox BorderThickness="1" BorderBrush="#FF000000"></TextBox>
</DockPanel>
</Window>
What happens, at least during my limited testing, is that the textbox renders with an inset border pattern (top/left is black, right/bottom is grey). However, when you resize to any position except the original, the entire textbox border goes to black. Whenever you return the window to the exact number of on-screen pixels the form had when it first loaded, it's inset again.
I'm guessing it isn't pixel snapping as I can easily correct the problem with this code:
<Window x:Class="WpfSandbox.CuriousExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CuriousExample" Height="300" Width="300">
<DockPanel Margin="15">
<Border BorderThickness="1" BorderBrush="#FF000000">
<TextBox BorderThickness="0" ></TextBox>
</Border>
</DockPanel>
</Window>
Anyone care to venture an explanation as to what I'm seeing? Or is it all in my head?
Like I said, the above workaround can resolve this problem - just trying to understand what is happening here.
Thanks,
-Scott
You can force the application to use the vista theme (aero)
Open your app.xaml and put something like:
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Aero;V3.0.0.0;31bf3856ad364e35;component/themes/aero.normalcolor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Don't forget to put the PresentationFramework.Aero reference into your project.
With this, you will se you application in XP like in Vista.
Hmm... are you running into a focus issue? I loaded the Aero theme, and I'm seeing your TextBox inset when the TextBox has focus or is moused-over. You can see this pretty clearly when you add a second TextBox like so:
<DockPanel Margin="15">
<TextBox BorderThickness="1" BorderBrush="#FF000000"></TextBox>
<TextBox BorderThickness="1" BorderBrush="#FF000000"></TextBox>
</DockPanel>
The default Style for Aero uses a ControlTemplate which sets the TextBox's border to use the ListBoxChrome which looks to set some extra properties when the control has Focus or is moused over.
Alternately, the default Style for the Luna theme binds the containing Border's BorderBrush directly to the TemplateBinding, which means that this is always respected (and why it works in XP/Luna and not in 2008 or Vista).

Controls "out of window/chrome" in WPF

Is there a way to have controls/images/etc "out of" the Window/Chrome (ie, Aero's glass) in WPF?
An example of what I mean is the WPF Yahoo Messenger which was released (and then discontinued) awhile back. The WindowStyle looks like it is set to None, but AllowTransparencies/CanResize set to false/true respectively - and the avatar is slightly "out of the window/chrome".
I know I could create my own glass border, but that may be a fair bit of effort to get it looking consistent.
Yes, I believe you will have to replace window's interface with your own. You can start with transparent window and a grid within leaving some margin around the grid. Then put thumbs, titlebar etc on the grid to simulate window behavior. Margin around the grid will allow you to draw controls outside your "window".
<Window
x:Class="TransparentFormDemo.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300"
AllowsTransparency="True"
WindowStyle="None" Background="Transparent">
<Grid Margin="20" Background="AliceBlue">
<Thumb Name="topThumb" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"
DragDelta="topThumb_DragDelta" Cursor="SizeNS"/>
<!--Thumbs continued-->
<Polygon Points="10,110 60,10 110,110" Fill="Blue" Margin="0,-30"/>
</Grid>
</Window>

Resources