WPF Textbox & Borders - curious resizing behavior - wpf

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).

Related

Button Border clipped in WPF with 125% DPI Setting

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>

How can I center the title of a WPF RibbonWindow?

I want to center the title of my RibbonWindow, and not have it aligned on the side.
This thread said it had an answer:
Center WPF RibbonWindow Title via XAML Code
but it didn't work.
Bellow is an image and the corresponding code.
<RibbonWindow x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Ribbon>
<Ribbon.TitleTemplate>
<DataTemplate>
<TextBlock TextAlignment="Center" HorizontalAlignment="Stretch" Width="{Binding ElementName=Window, Path=ActualWidth}">ApplicationTitle
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="0" Color="MintCream " BlurRadius="10" />
</TextBlock.Effect>
</TextBlock>
</DataTemplate>
</Ribbon.TitleTemplate>
</Ribbon>
</Grid>
</RibbonWindow>
I am using VS 2012, with .NET 4.5 and the included System.Windows.Controls.Ribbon assembly.
Had a bad experience with using RibbonControlsLibrary for WPF. It has issues not only around title centering. It also breaks window rounding corners at the top, icon and title goes out of the screen when maximized, and personally I haven't found any chance to program ribbon group dialog. All of this lead me to searching for an alternative, and I have found a Fluent Ribbon Controls Suite
Download source code and build it for .NET 4.5 (I did it with absolutely no issues).
The ElementName in the binding (Width="{Binding ElementName=Window, Path=ActualWidth}") needs to match the name of the RibbonWindow. So, in this case you need "Window" for the name:
<RibbonWindow x:Class="Window1" x:Name="Window"
... />

Easier way to scale controls?

Recently I coded an extremely graphical interface in for hi-res displays(1900x1200). Of course my the requirements changed, and it needed to be redone in 1366x768. Rather than retool the app for a fixed resolution(lesson learned), i moved everything into its own ViewBox and recrafted my grid controls to handle this. The app looks great and scales to (nearly)any size without artifacts.
My question is, is there an easier way to accomplish full dynamic control scaling in WPF with putting each control in its own viewbox? ViewBox was the only control I could find to do this, but it can only contain one child element, which made this a VERY tedious process. Is there a better control that can contain child controls that scales?
Why not put a Grid or StackPanel inside the viewBox, and then fill them with the controls?
Something like this
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WfpApplication1="clr-namespace:WfpApplication1"
Title="MainWindow" Height="350" Width="525">
<Viewbox>
<StackPanel>
<CheckBox Content="Hello World!"/>
<TextBlock Text="Hello world"/>
<Button Content="Hello world!"/>
</StackPanel>
</Viewbox>

WPF: Focus in a Window and UserControl

I'm trying to get a UserControl to tab properly and am baffled. The logical tree looks like this.
|-Window
-Grid
-TabControl
-TabItem
-StackPanel
-MyUserControl
|-StackPanel
-GroupBox
-Grid
-ComboBox
-Textbox1
-Textbox2
Everything works fine, except when the visibility converter for the ComboBox returns Visibility.Collapsed (don't allow user to change database mode), then when textbox1 is selected, instead of being able to tab through the controls in the UserControl, the focus shifts to a button declared at the bottom of the window. Nothing else apart from the controls displayed has TabIndex or FocusManager properties set.
I'm banging my head against a brick wall and I must be missing something. I've tried IsFocusScope=True/False, played with FocusedElement and nothing works if that ComboBox is invisible (Visibility.Collapsed).
<Window x:Class="MyNamespace.Client.WinInstaller"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FocusManager.FocusedElement="{Binding ElementName=tabWizard}">
<Window.Resources>
<props:Settings x:Key="settings" />
</Window.Resources>
<Grid Grid.IsSharedSizeScope="True">
<!-- row and column definitions omitted -->
<loc:SmallHeader Grid.Row="0" x:Name="headerBranding" HeaderText="Setup" />
<TabControl x:Name="tabWizard" DataContext="{StaticResource settings}" SelectedIndex="0" FocusManager.IsFocusScope="True">
<TabItem x:Name="tbStart" Height="0">
<StackPanel>
<TextBlock Text="Database Mode"/>
<loc:DatabaseSelector x:Name="dbSelector" AllowChangeMode="False" TabIndex="1"
AvailableDatabaseModes="SQLServer" IsPortRequired="False"
DatabaseMode="{Binding Default.DbMode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
DatabasePath="{Binding Default.DatabasePath,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</TabItem>
...
The top of the user control is below:
<UserControl x:Class="MyNamespace.Client.DatabaseSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="root"
FocusManager.IsFocusScope="True"
FocusManager.FocusedElement="{Binding ElementName=cboDbMode}">
<UserControl.Resources>
<conv:DatabaseModeIsFileBased x:Key="DatabaseModeIsFileBased"/>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</UserControl.Resources>
<StackPanel DataContext="{Binding}">
<GroupBox>
<Grid>
<!-- row and column definitions omitted -->
<Label Content="Database Mode"/>
<ComboBox x:Name="cboDbMode" SelectedValue="{Binding ElementName=root,Path=DatabaseMode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
DisplayMemberPath="Value" SelectedValuePath="Key" TabIndex="1" Visibility="{Binding AllowChangeMode,ElementName=root,Converter={StaticResource BooleanToVisibilityConverter}}" />
<!-- AllowChangeMode is a DependencyProperty on the UserControl -->
<Grid><!-- row and column definitions omitted -->
<Label "Host"/>
<TextBox x:Name="txtDBHost" Text="{Binding ElementName=root,Path=DatabaseHost,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" TabIndex="2" />
<TextBox x:Name="txtDBPort" Text="{Binding ElementName=root,Path=DatabasePortString,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" TabIndex="3" />
I know this response is quite late... but have you tried:
<UserControl ... KeyboardNavigation.TabNavigation="Local">
Doing so will ensure once your UserControl has recieved focus, you will navigate only through TabStop within your UserControl (instead of worring about conflicting TabIndex values throughout your app). After looping through the TabStops of your UserControl, TabNavigation will resume to the TabStop outside of it.
http://msdn.microsoft.com/en-us/library/system.windows.input.keyboardnavigationmode.aspx
Maybe the problem is that you hide the FocusManager.FocusedElement.
Anyway, you could make life easier by just eliminating some complicating factors:
Remove FocusManager.FocusedElement...
the ComboBox is the first control within anyway.
Remove FocusManager.IsFocusScope...
I suppose it's ok if everytime you enter the usercontrol the first control within will be focussed, not the one that was focussed when you left it before. Just let the usercontrol be "inlined" in the surrounding controls.
Remove the explicit TabIndices in the UserControl. Your layout already implies the same ordering.
If you eliminate these three complicating factors, you might already be done.
Maybe you also have to set your UserControl Focusable=False, s.t. the focus is passed to the first focussable Control within - comboBox or TextBox1.

Is there a way to touch-enable scrolling in a WPF ScrollViewer?

I'm trying to create a form in a WPF application that will allow the user to use iPhone-like gestures to scroll through the available fields. So, I've put all my form controls inside a StackPanel inside a ScrollViewer, and the scrollbar shows up as expected when there are too many elements to be shown on the screen.
However, when I try to test this on my touch-enabled device, a panning gesture (placing a finger down on the surface and dragging it upward) does not move the viewable area down as I would expect.
When I simply put a number of elements inside a ListView, the touch gestures work just fine. Is there any way to enable the same kind of behavior in a ScrollViewer?
My window is structured like this:
<Window x:Class="TestTouchScrolling.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
<ScrollViewer Name="viewer" VerticalScrollBarVisibility="Auto">
<StackPanel Name="panel">
<StackPanel Orientation="Horizontal">
<Label>Label 1:</Label>
<TextBox Name="TextBox1"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label>Label 2:</Label>
<TextBox Name="TextBox2"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label>Label 3:</Label>
<TextBox Name="TextBox3"></TextBox>
</StackPanel>
<!-- Lots more like these -->
</StackPanel>
</ScrollViewer>
</Grid>
You should use the attached properties:
ScrollViewer.PanningMode
ScrollViewer.PanningDeceleration
ScrollViewer.PanningRatio
The PanningMode defaults to None in the ScrollViewer default style, but setting it to another value will enable touch scrolling. I'm currently investigating using this feature in my app and am looking for a good deceleration and ratio value... I'll probably just have to test them out to find something that works well.
If you are using .NET 4.0, there is a cool thing recently released by Microsoft team!! They ported all those nice Surface controls to Win7. SurfaceScrollViewer is really cool like iphone one. Install this toolkit and start a SurfaceWin7Touch project from VS2010 project template
http://www.microsoft.com/en-us/download/details.aspx?id=26716

Resources