WPF Ribbon steals TAB - wpf

I have a simple WPF application with Ribbon and few controls. Unfortunately when pressing TAB key to change focus, Ribbon somehow manages looping only within itself, other controls don't get a chance...
This is the XAML:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
Title="MainWindow" Height="350" Width="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="136" />
<RowDefinition Height="175*" />
</Grid.RowDefinitions>
<my:Ribbon HorizontalAlignment="Stretch" Name="ribbon1" VerticalAlignment="Top">
<my:RibbonTab Header="Ribbon">
<my:RibbonGroup>
<my:RibbonComboBox Label="ComboBox" Name="ribbonComboBox1">
<my:RibbonGallery MaxColumnCount="1">
<my:RibbonGalleryCategory>
<my:RibbonGalleryItem Content="An item" />
</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonComboBox>
</my:RibbonGroup>
</my:RibbonTab>
</my:Ribbon>
<TextBox TabIndex="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="12,19,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
<TextBox TabIndex="2" Height="23" HorizontalAlignment="Left" Margin="12,48,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Grid.Row="1" />

OK. Let me answer myself. For my purposes it's OK to NOT to use TAB for Ribbon. For Ribbon I can use KeyTip(s), so basically I have just added Focusable="False" KeyboardNavigation.TabNavigation="None" into ribbon definition. So the whole code could look like this:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
Title="MainWindow" Height="350" Width="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="136" />
<RowDefinition Height="175*" />
</Grid.RowDefinitions>
<my:Ribbon Focusable="False" KeyboardNavigation.TabNavigation="None" HorizontalAlignment="Stretch" Name="ribbon1" VerticalAlignment="Top">
<my:RibbonTab Header="Ribbon" KeyTip="R">
<my:RibbonGroup>
<my:RibbonComboBox KeyTip="C" Label="ComboBox" Name="ribbonComboBox1">
<my:RibbonGallery MaxColumnCount="1">
<my:RibbonGalleryCategory>
<my:RibbonGalleryItem Content="An item" />
</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonComboBox>
</my:RibbonGroup>
</my:RibbonTab>
</my:Ribbon>
<TextBox TabIndex="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="12,19,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
<TextBox TabIndex="2" Height="23" HorizontalAlignment="Left" Margin="12,48,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Grid.Row="1" />
</Grid>
</Window>

KeyboardNavigation.TabNavigation="Continue" does it for me, using System.Windows.Controls.Ribbon.dll

Related

how to add a multiple buttons inside a groupbox in wpf?

I need to add a multiple buttons inside a groupbox in wpf, but I can't. I need to create my key pad for an atm machine, with all numbers, but if I try to create a button number 2, the button number 1 disappears.
what is wrong?
<Window x:Name="Win_Users" x:Class="ATM_Simulator.WindowUsers"
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:ATM_Simulator"
mc:Ignorable="d"
Title="WindowUsers" Height="300" Width="500">
<Grid>
<GroupBox x:Name="grbx_key_pad" Header="Key Pad" HorizontalAlignment="Left" Height="220" Margin="26,10,0,0" VerticalAlignment="Top" Width="189">
<Button x:Name="btn_1" Content="1" HorizontalAlignment="Left" Margin="10,13,0,0" VerticalAlignment="Top" Width="29" Height="32"/>
</GroupBox>
<GroupBox x:Name="grbx_select_transaction" Header="Select Transaction :" HorizontalAlignment="Left" Height="88" Margin="291,23,0,0" VerticalAlignment="Top" Width="179"/>
<GroupBox x:Name="grbx_select_account" Header="Select Account" HorizontalAlignment="Left" Height="92" Margin="291,138,0,0" VerticalAlignment="Top" Width="179"/>
<Button x:Name="btn_submit" Content="Submit" HorizontalAlignment="Left" Margin="291,239,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btn_close" Content="Close" HorizontalAlignment="Left" Margin="393,239,0,0" VerticalAlignment="Top" Width="77"/>
</Grid>
You have to put a container inside the GroupBox, for example a Grid would be a good choice:
<GroupBox x:Name="grbx_key_pad" Header="Key Pad" HorizontalAlignment="Left" Height="220" Margin="26,10,0,0" VerticalAlignment="Top" Width="189">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="btn_1" Grid.Column="0" Content="1" Width="29" Height="32"/>
<Button x:Name="btn_2" Grid.Column="1" Content="2" Width="29" Height="32"/>
<!-- more buttons -->
<Button x:Name="btn_4" Grid.Row="1" Grid.Column="0" Content="4" Width="29" Height="32"/>
<!-- yet more buttons -->
</Grid>
</GroupBox>

Simpliest cross-resolution apps and adaptive UI building. Can't make that in WPF

Currently trying to build simpliest cross-resolution app (in other words an adaptive UI). The Apps itself is intended to start at min res:1024x768 and max res: 1920x1080.
However I have no success in doing of that.
this is 1024x768 window, where everything looks good.
this is 1920x1080 window, where controls "swam". However pic adapted itself to resolution.
<Window x:Class="WpfApplication2.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:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<GroupBox x:Name="groupBox_Copy" Header="Truck2" Height="148" VerticalAlignment="Top" Margin="430,503.6,468.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy1" Header="Truck3" Height="148" VerticalAlignment="Top" Margin="752,503.6,146.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy2" Header="Truck1" Height="148" VerticalAlignment="Top" Margin="148,503.6,750.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png"/>
</Grid>
Layout via fixed Margins in not adaptive. There is nothing wrong in using nested Panels:
UniformGrid can arrange equal space for each child element (GroupBox).
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<UniformGrid Rows="1" Grid.Row="2">
<GroupBox x:Name="groupBox_Copy" Header="Truck2" Height="148" VerticalAlignment="Top">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy1" Header="Truck3" Height="148" VerticalAlignment="Top">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy2" Header="Truck1" Height="148" VerticalAlignment="Top">
<Button x:Name="button" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
</UniformGrid>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png"/>
</Grid>
1024x768.
1920x1080.
Looks a little better. However, the controls "swam" to left direction. As can be seen.
<Window x:Class="WpfApplication2.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:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png"/>
<Grid HorizontalAlignment="Left" Height="138" Margin="10,9.6,0,0" Grid.Row="2" VerticalAlignment="Top" Width="998">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="147*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="171*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="120*"/>
</Grid.ColumnDefinitions>
<GroupBox x:Name="GroupBox1" Grid.Column="1" Header="Truck1" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,147.6,0">
<Button x:Name="button_Copy2" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-1.211,-0.299"/>
</GroupBox>
<GroupBox x:Name="GroupBox2" Grid.Column="3" Header="Truck2" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,171.6,0">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-1.211,-0.299"/>
</GroupBox>
<GroupBox x:Name="GroupBox3" Grid.Column="5" Header="Truck3" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,120.4,0">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
</Grid>
</Grid>

controls positions missed when maximized window in WPF

I was dragged the controls on the form and when i run it and maximized the window the controls don't keep on the same place which i put it on.
how to keep controls in the same place when the window is maximized ??
this is the XAML code:
<Window x:Class="Wpf_App1.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:Wpf_App1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="319" VerticalAlignment="Top" Width="517">
<Image x:Name="image" HorizontalAlignment="Left" Height="319" VerticalAlignment="Top" Width="517" Stretch="Fill" Source="C:\Users\Moath\OneDrive\Documents\Visual Studio 2015\Projects\Wpf_App1\Wpf_App1\Images\LoginScr.jpg"/>
<Grid HorizontalAlignment="Left" Height="52" Margin="310,112,0,0" VerticalAlignment="Top" Width="122">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<TextBox x:Name="textBox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Height="16" Width="120
" Margin="0,10,0,0" >
<TextBox.Background>
<ImageBrush Stretch="None"/>
</TextBox.Background>
</TextBox>
<TextBox x:Name="textBox1" HorizontalAlignment="Left" Margin="0,10,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Height="16
" Width="120
" >
<TextBox.Background>
<ImageBrush Stretch="None"/>
</TextBox.Background>
</TextBox>
</Grid>
</Grid>
</Grid>
</Window>
EDIT in your 3rd Inner Grid you are setting Margin="310,112,0,0" that is the cause of your problem. The Margin is work like this Margin="left,top,right,bottom" so you set the left Margin to 310 and top Margin to 112 that is why the textbox not in top left always. try to set the Margin to 0.
so it will look like this:
<Grid HorizontalAlignment="Left" Height="52" Margin="0" VerticalAlignment="Top" Width="122">

Scrolling ValidationSummary in Silverlight

I am attempting to make ValidationSummary in Silverlight scrollable. It does not work and I am not sure what I am doing wrong.
When wrapped in ScrollViewer, the validationsummary is not shown.
<UserControl x:Class="SilverlightDataValidation.MainPage"
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:ct="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White" BindingValidationError="LayoutRoot_BindingValidationError">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="55" />
<ColumnDefinition Width="345" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="160" />
<RowDefinition Height="40*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="4" Height="135" HorizontalAlignment="Left" Margin="0,4,0,0" Name="scrollViewer1" VerticalAlignment="Top" MaxHeight="200" Width="333" Grid.Column="1" HorizontalScrollBarVisibility="Auto">
<ct:ValidationSummary Width="300" Grid.Column="1" Margin="0,0,45,0" />
</ScrollViewer>
<TextBox Name="txtName" Text="{Binding Name, Mode=TwoWay, ValidatesOnExceptions =True, NotifyOnValidationError=True, UpdateSourceTrigger=Explicit}"
Grid.Column="1" Grid.Row="1"
Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="185" />
<TextBox Name="txtAge"
Text="{Binding Age, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, UpdateSourceTrigger=Explicit}"
Grid.Column="1" Grid.Row="2"
Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" />
<Button Content="Save" Grid.Column="1" Grid.Row="3"
Height="23" HorizontalAlignment="Left" Name="butSave" VerticalAlignment="Top" Width="75" Click="butSave_Click" />
<TextBlock Grid.Row="1" Name="textBlock1" Text="Name"
VerticalAlignment="Top" Margin="22,0,0,0" Height="23" HorizontalAlignment="Left" />
<TextBlock Grid.Row="2" Name="textBlock2" Text="Age"
VerticalAlignment="Top" Margin="34,0,0,0" Height="23" HorizontalAlignment="Left" />
</Grid>
When you remove the validationsummary from ScrollViewer it shows.
ScrollView not required, was able to accomplish the same effect by setting maxheight property on the ValidationSummary

Fill all available space in StackPanel

<Window x:Class="DataBinding_01.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">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto">
<TextBox Height="23" Name="textBox1" Width="Auto" />
<TextBox Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</StackPanel>
</Window>
I want the Button fill all available space on the StackPanel. How can I do it?
If you mean fill all horizontal and vertical space you should use a DockPanel.
<DockPanel Height="Auto" Name="stackPanel1" Width="Auto" LastChildFill="True">
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox1" Width="Auto" />
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</DockPanel>

Resources