WPF TextBox Focus - wpf

I am setting focus on a Textbox like this:
<DockPanel
Margin="0,0,0,0"
LastChildFill="True"
FocusManager.FocusedElement="{Binding ElementName=messengerTextToSend}">
<ListBox
x:Name="messengerLabelParticipants"
DockPanel.Dock="Top" Height="79" Margin="0,1,0,0" Padding="0"
Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0"
AllowDrop="True"
ItemsSource="{Binding Path=involvedUsers}" ItemTemplate="{StaticResource chatParticipants}" Tag="{Binding Path=chatSessionID}"
Drop="participantList_Drop" DragEnter="participantList_DragEnter" DragLeave="messengerLabelParticipants_DragLeave">
</ListBox>
<TextBox
x:Name="messengerTextToSend"
Focusable="True"
Margin="10,0,10,10"
DockPanel.Dock="Bottom" Height="100"
Tag="{Binding Path=.}"
KeyUp="messengerTextToSend_KeyUp"
Cursor="IBeam"
Style="{StaticResource messengerTextBoxSendText}"/>
<ScrollViewer
x:Name="messengerScroller"
Template="{DynamicResource ScrollViewerControlTemplate1}"
ScrollChanged="messengerScroller_ScrollChanged" Loaded="messengerScroller_Loaded"
Margin="0,10,0,10">
<ListBox
x:Name="messengerListMessages"
Margin="10,0,0,0" Padding="0"
Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Path=messages}" ItemTemplateSelector="{StaticResource messageTemplateSelector}">
</ListBox>
</ScrollViewer>
</DockPanel>
However, when the page load, although the Textbox visually appears to have focus, the cursor is static and I have to manually either click on the Textbox or tab to it in order to start typing. I'm not sure what I'm doing wrong but I've tried every setting, inclduing setting it in the code to get it working. Any assistance would be greatly appreciated.

Move the FocusManager.FocusedElement command to the Window element.
<Window x:Class="MYClass.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="My Window"
FocusManager.FocusedElement="{Binding ElementName=messengerTextToSend}">
Height="400"
Width="600">
<DockPanel>
</DockPanel>
</Window>
Check out this question for the case of a user control.

Related

Dock a resizable wpf DataGrid at bottom of window

In a WPF project, I want to dock a DataGrid to the bottom of a window so that if the window resizes, I will be able to utilize more of the DataGrid. Like this:
How do I do that? All my DockPanel attempts have failed.
The current attempt is here:
<Window x:Class="Foo.SQLDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:Foo.Controls"
Title="test" ResizeMode="CanResize" Width="400" Height="400">
<StackPanel Orientation="Vertical" Height="Auto" Width="Auto">
<StackPanel Orientation="Vertical">
<Label Content="SQL" HorizontalAlignment="Left"/>
<TextBox Width="377" Height="100" Name="txtSQL"/>
<Button Content="Run SQL" Click="Button_Click_1" />
</StackPanel>
<Label Content="Result" HorizontalAlignment="Left"/>
<ScrollViewer Width="Auto" Height="180" DockPanel.Dock="Right,Bottom"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<DataGrid x:Name="dataResult" />
</ScrollViewer>
</StackPanel>
</Window>
The height of the scrollviewer+datagrid will not adapt however.
First of all, using DockPanel.Dock without having a DockPanel as a parent doesn't do much...
In my example I changed your root StackPanel to a DockPanel so it will work as you want.
I also used DockPanel.LastChildFill property which makes sure the last child of the DockPanel will get all the remaining space:
<DockPanel LastChildFill="True">
<StackPanel Orientation="Vertical" DockPanel.Dock="Top">
<Label Content="SQL" HorizontalAlignment="Left"/>
<TextBox Width="377" Height="100" Name="txtSQL"/>
<Button Content="Run SQL" Click="Button_Click_1" />
</StackPanel>
<Label Content="Result" HorizontalAlignment="Left" DockPanel.Dock="Top"/>
<ScrollViewer DockPanel.Dock="Bottom,Right"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<DataGrid x:Name="dataResult" />
</ScrollViewer>
</DockPanel>
Finally, to make it really stretch on all the remaining space, I removed the Height property you set, as this blocked it from stretching.
Not sure if useful or if i understand you question the right way but have you tried this:
<DataGrid DockPanel.Dock="Right, Bottom" VerticalAlignment="Bottom" HorizontalAlignment="Right" ></DataGrid>

WPF height and scroll at listbox - imposible

To keep things simple all i am trying to do is to place a listbox and a button below it. Although it seems simple it isn't. It is not, because it is in a GRID...
The row size is star size and listbox having verticalAlign top works great all the time. The problem is that I cannot add a button below it. Having a grid with 2 rows one star height and the other auto would place the button at the bottom of the form even if listbox contents are little. Trying to set both rows auto doesn't work when resizing as no scrollbar is visible at the listbox.... Any workaround for this??
Update some code
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel >
<ListBox DockPanel.Dock="Top" Name="lbStaff" ItemsSource="{Binding}"
Grid.Row="0" VerticalAlignment="Top" BorderThickness="0"
Background="WhiteSmoke" Margin="15,10,20,30" Style="{DynamicResource
ListBoxUsers}" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource
ListBoxTest1}"></Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Margin="5,4,5,4">
<TextBlock HorizontalAlignment="Stretch" FontSize="16"><Run
Text="{Binding Name}"/> - <Run Text="{Binding Mode=OneWay,
Path=PositionString}"/></TextBlock>
<TextBlock >Τηλέφωνο <Run Text="{Binding Phone}"/>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button DockPanel.Dock="Top" Grid.Row="0" HorizontalAlignment="Right"
VerticalAlignment="Top" Margin="0,10,7,0" Style="{DynamicResource
ButtonStyleNew1}">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/WpfApplication1;component/Images/filenew1.png"
Stretch="None" VerticalAlignment="Center"></Image>
<TextBlock Margin="5,0,0,0" FontSize="16">Προσθήκη Χρήστη</TextBlock>
</StackPanel>
</Button.Content>
</Button>
</DockPanel>
</Grid>
</Grid>
What i usually do is not using rows of grid but using DockPanel you can adjust the alignments by nesting each elements. But again it totally depends on the designer how they design that using grid row or any other way. What i got from the question the following code should help you out.
but if you post some code then we can figure out where the actual problem is.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<ListBox Height="50"/>
</DockPanel>
<DockPanel DockPanel.Dock="Bottom">
<Button Height="20" DockPanel.Dock="Top"/>
<Label/>
</DockPanel>
</DockPanel>
</Grid>
So your problem here is that you have the in the ListBox you have ScrollViewer.VerticalScrollbars=Visible that make it collapsed if you dont want scrollbars and i would suggest not to use margins more in the designing. if you still have scroll bars remove the height of the ListBox and make the window larger. It all depends upon the size of the window if you don't have the size and proper alignment. Refining your code
<Window xmlns:my="clr-
namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
x:Class="MyLightWpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
xmlns:local="clr-namespace:MyLightWpfApplication.ViewModel"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<DockPanel >
<DockPanel DockPanel.Dock="Top" Width="400" Height="200">
<ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ListBox Name="lbStaff" ItemsSource="{Binding AutoCompleteData}"
BorderThickness="0"
Background="WhiteSmoke" >
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel >
<TextBlock HorizontalAlignment="Stretch" FontSize="16"><Run
Text="{Binding FirstName}"/> - <Run Text="{Binding Mode=OneWay,
Path=PositionString}"/></TextBlock>
<TextBlock >Τηλέφωνο <Run Text="{Binding LastName}"/>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</DockPanel>
<DockPanel DockPanel.Dock="Bottom">
<Button DockPanel.Dock="Top" Height="30" Grid.Row="0">
<Button.Content>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="16">Προσθήκη Χρήστη</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<Label/>
</DockPanel>
</DockPanel>
</Grid>
</Window>
Its all dependent on how much data you have in the ListBox. I have tried this code populating listbox with 20 rows its not showing scrollbars at all
You might try auto for both and put a MaxHeight on the ListBox but you still take a chance of pushing the button off the screen. Or put both in a ScrollViewer. Or can you live with the button on top?
I solved this problem using a dockpanel. I docked buttons at bottom and then i let listbox to fill the remaining area..(lastchildfill=true) ...
It works fine...

Setting Focus Does Not Allow Instant Editing

I have a WPF UserControl with a textbox. Here's how the textbox and it's parent control are defined:
<DockPanel Margin="10,20,10,10" FocusManager.FocusedElement="{Binding ElementName=uxJobNumber}" >
<TextBox x:Name="uxJobNumber" Text="{Binding JobNumber, Mode=TwoWay, ValidatesOnDataErrors=True}" TextWrapping="Wrap" FontSize="48" BorderBrush="Black" BorderThickness="1" Margin="10"/>
</DockPanel>
With the FocusManager.FocusedElement set, I can see a cursor bar present within the textbox. However, the cursor bar is not blinking, and does not allow the user to immediately start typing.
Without the FocusManager.FocusedElement set, when the application starts there is no cursor bar within the text box at all.
Here's the complete XAML
<UserControl x:Class=""
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:converters="clr-namespace:.Modules.Converters"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
mc:Ignorable="d">
<UserControl.Resources>
<converters:VisibilityConverter x:Key="Visibility" />
</UserControl.Resources>
<Canvas Width="1024" Height="768" >
<Border Style="{DynamicResource GroupBox}" Canvas.Left="36.261" Canvas.Top="32.131" Width="426.936">
<StackPanel>
<Border>
<TextBlock Text="STEP 1"/>
</Border>
<TextBlock Text="Enter the five (5) digit Job Number and click Verify." />
<Path/>
<DockPanel Margin="10,20,10,10" FocusManager.FocusedElement="{Binding ElementName=uxJobNumber}" >
<Button Content="Verify" Width="125" Height="65" HorizontalAlignment="Right" Command="{Binding SearchJobCommand}" Style="{DynamicResource RedButton}" Margin="0" DockPanel.Dock="Right" IsDefault="True"/>
<TextBox Text="{Binding JobNumber, Mode=TwoWay, ValidatesOnDataErrors=True}" TextWrapping="Wrap" FontSize="48" BorderBrush="Black" BorderThickness="1" x:Name="uxJobNumber" Margin="10" KeyboardNavigation.TabIndex="0" />
</DockPanel>
</StackPanel>
</Border>
<TextBlock Text="{Binding Error}" Visibility="{Binding HasError, Converter={StaticResource Visibility}}" Canvas.Left="48" Canvas.Top="288" FontSize="16" Width="403" Foreground="Red" />
</Canvas>
We finally resorted to using the Focus() method in the code behind when the form is done loading.
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
uxJobNumber.Focus();
}
Using your code I get this to work; blinking and all.

Wpf ItemsControl with datatemplate, problem with doubled border for some items

I have simple ItemsControl with custom datatemplate, template contains only textblock with border. All items should be displayed vertically one after another, but some items have extra border.
How can I remove it?
I want to achieve something similar to enso launcher, it looks like
My implementation looks like this
here is my xaml code:
<Window x:Class="winmole.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
x:Name="hostWindow"
Height="Auto"
MinHeight="100"
MinWidth="100"
Width="Auto"
Padding="10"
AllowsTransparency="True" WindowStyle="None" Background="Transparent"
Top="0"
Left="0"
SizeToContent="WidthAndHeight"
Topmost="True"
Loaded="Window_Loaded"
KeyUp="Window_KeyUp"
>
<Window.Resources>
<!--Simple data template for Items-->
<DataTemplate x:Key="itemsTemplate">
<Border Background="Black" Opacity="0.9" HorizontalAlignment="Left" CornerRadius="0,2,2,0">
<TextBlock Text="{Binding Path=Title}"
TextWrapping="Wrap"
FontFamily="Georgia" FontSize="30"
Height="Auto"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
TextAlignment="Left" Padding="5" Margin="0" Foreground="Yellow"/>
</Border>
</DataTemplate>
</Window.Resources>
<DockPanel>
<ItemsControl DockPanel.Dock="Bottom" Name="itcPrompt"
ItemsSource="{Binding ElementName=hostWindow, Path=DataItems}"
ItemTemplate="{StaticResource itemsTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DockPanel>
If I understand your question correctly: Try to set SnapsToDevicePixels="True" on the Border
<Border SnapsToDevicePixels="True" Background="Black" Opacity="0.9" ...

Tab order and index in WPF using the MVVM pattern

I'm having an issue with tabbing through the controls on a WPF application using the MVVM pattern. I have the following XAML which defines a tree structure
<Grid Background="Transparent" Margin="10">
<TreeView ItemsSource="{Binding FirstLevelNavigableViewModels}" Background="Transparent"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderThickness="0"
ItemContainerStyle="{StaticResource TreeViewItemStyle1}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type ViewModel:VendorViewModel}" ItemsSource="{Binding Children}">
<View:VendorView HorizontalContentAlignment="Stretch" />
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type ViewModel:ProductViewModel}">
<View:ProductView HorizontalContentAlignment="Stretch" />
</DataTemplate>
</TreeView.Resources>
</TreeView>
</Grid>
When the treeview is loaded, the XAML for the "ProductView" is as follows
<Border Margin="0,2,2,2" CornerRadius="3" Background="#3FC7B299" DockPanel.Dock="Right" HorizontalAlignment="Right" Width="109">
<StackPanel Orientation="Vertical" Margin="6,4">
<DockPanel>
<TextBlock DockPanel.Dock="Left" FontFamily="Segoe" FontSize="10" FontWeight="Medium"
Foreground="Black" Opacity="0.75"
Text="CALC. REG. PRICE"></TextBlock>
<Button Width="10" Height="10" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Padding="-4" Margin="0" Command="{Binding UserDefinedRetailPriceCommand}" Visibility="{Binding UserDefinedRetailPriceButtonView}">
<Image Width="10" Height="10" Source="/Arhaus.Pricing.Client;component/Styles/Images/error.png"></Image>
</Button>
</DockPanel>
<TextBox FontFamily="Segoe" FontSize="16" FontWeight="Medium" KeyboardNavigation.IsTabStop="True" KeyboardNavigation.TabIndex="{Binding RegularPriceTabIndex}"
Foreground="Black" Opacity="0.9" KeyboardNavigation.TabNavigation="Continue"
ebf:LostFocusBehaviour.LostFocusCommand = "{Binding LostFocusSugg}"
Text="{Binding NewSuggestedRetailPrice,Converter={StaticResource FormattingConverter}, ConverterParameter=' \{0:C\}', Mode=TwoWay, UpdateSourceTrigger=LostFocus}" Background="#FFE6DED3" BorderBrush="#FFE6DED3" DataContext="{Binding StringFormat=\{0:c\}, NotifyOnValidationError=True}" Padding="0" TabIndex="1"></TextBox>
</StackPanel>
</Border>
I have the Tab Index bound to an integer that is ever increasing and bound as the treeview is loaded (I.E. I have it setup as tab index 1, 2, 3 etc. as each successive model is loaded).
I would like to be able to hit tab and jump to the next textbox in the treeview but when I click the TAB key, nothing happens. I'm not sure if I have the tabbing setup correctly but I'm very new to WPF and at a loss as to where and how to set the tabbing to make it work. I'm used to WinForms where you just set the tab index and go from there.
Thank you for your assistance, I apologize for the large code block.
I don't have a solution ready but some thoughts that maybe may help:
I don't know what RegularPriceTabIndex returns but probably it begins for each new TreeViewItem at the same index?
The same tab-index is given then multiple times because of repeating use of ProductView. Perhaps this leads to a problem. You can try setting FocusManager.IsFocusScope="true" for the ProductView. Maybe this helps.
Try also to set Control.IsTabStop="true" on the TextBox.

Resources