WPF MVVM disable focus on ContentControl (with the Tab key) - wpf

I have a window with a ContentControl binding:
<ContentControl Content="{Binding CurrentViewModel}" />
I also have an empty user control binds to the ContentControl:
<UserControl x:Class="UserControl1"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
</Grid>
</UserControl>
When I run and press the tab keyboard I get a dotted rectangle around the content control. How can I disable this?
I tried using Focusable="False" and FocusVisualStyle="{x:Null}" without success...

Have you tried setting IsTabStop="False", for example...
<ContentControl Height="200" Width="200" IsTabStop="False">
<ContentControl.Content>
<TextBox/>
</ContentControl.Content>
</ContentControl>
and I would suggest you combine it with this trick:
Loaded += (sender, e) =>
MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
from the answer to this question: WPF and initial focus

Override the ContentControl Style and add property FocusVisualStyle as null and implement by using style property
<ContentControl Height="200" Width="200" FocusVisualStyle="{x:Null}">
<ContentControl.Content>
<local:UserControl1/>
</ContentControl.Content>
</ContentControl>

Related

Extended WPF Toolkit zoombox disable zoom and reset

I am trying to use the extended toolkit Zoombox in my WPF Application with NET451.
I am using a tabcontrol for navigation and the items are bound to an observablecollection of ContentControls. When i change tab the content is changed but the zoomparameters are not reset. Also i want to disable zooming for certain tabitems. Binding to properties such as scale, minscale and maxscale does not seem to do the trick. My question is, how can i reset/go to home when changing view?
And how can i disable zoom for cetain tabitems?
XAML Looks like:
<Controls:MetroWindow x:Class="Metrotest.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:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:toolkit="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:local="clr-namespace:Metrotest"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Controls:MetroWindow.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVis" />
</Controls:MetroWindow.Resources>
<Grid>
<Grid.DataContext>
<local:MainViewModel/>
</Grid.DataContext>
<TabControl ItemsSource="{Binding tabitems}">
<TabControl.ContentTemplate>
<ItemContainerTemplate>
<Controls:FlipView
IsBannerEnabled="False"
ItemsSource="{Binding flipviewitems}" >
<Controls:FlipView.ItemTemplate>
<DataTemplate>
<toolkit:Zoombox ZoomOn="Content" x:Name="zoombox" AutoWrapContentWithViewbox="False" >
<ContentControl Content="{Binding flipview.Content}"/>
</toolkit:Zoombox>
</DataTemplate>
</Controls:FlipView.ItemTemplate>
</Controls:FlipView>
</ItemContainerTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Controls:MetroWindow>

UserControl Canvas.Left binding doesnt work

So the problem is this. I need UserControl which will have set Canvas.Top and Canvas.Left but these properties are binded from the ViewModel. For simplicity let's have this code for the user control with no code behind:
<UserControl x:Class="BadBinding.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Canvas.Left="{Binding ElementName=slider, Path=Value}"
>
<Grid Width="100" Background="Red">
<Slider x:Name="slider" Minimum="100" Maximum="250" />
</Grid>
</UserControl>
And this code for the main window:
<Window x:Class="BadBinding.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"
xmlns:local="clr-namespace:BadBinding"
>
<Canvas>
<local:MyUserControl />
</Canvas>
</Window>
I don't know why is binding not working. When you set Canvas.Left directly to some value everything is fine as well as writing content of the user control directly to the main window.
I think its because the UserControl is constructed befor being added to the Canvas and since Canvas.Left is an attached property it probably won't resolve correctly.
Try using a Reference binding.
<UserControl x:Class="BadBinding.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Canvas.Left="{Binding Source={x:Reference Name=slider}, Path=Value}"
>
<Grid Width="100" Background="Red">
<Slider x:Name="slider" Minimum="100" Maximum="250" />
</Grid>
</UserControl>
Note: you may get a compile warning, but it will still compile.
But I think the best option would be to create a property on your usercontrol to bind the value, this will also work.
I tried a lot with Bindings but it dint worked for me too.. so if you wanna go with EventHandler then the following workaround may help you..
Remove the Bindings and add an event handler to ValueChanged event
In your MyUserControl.xaml
<UserControl x:Class="BadBinding.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Width="100" Background="Red">
<Slider x:Name="slider" Minimum="100" Maximum="250" ValueChanged="slider1_ValueChanged" />
</Grid>
</UserControl>
In your MyUserControl.xaml.cs
private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
Canvas.SetLeft(this, slider1.Value);
}
I tried this and working for me if you find any problem then let me know..

how stretch user control in tab control item

Hi I try solve how stretch user control width / height which is active in tab control to tab control width / height.
I use caliburn micro.
I create some user control. Here is it:
<UserControl x:Class="Spirit.Views.TabChatView"
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:Micro="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
xmlns:Controls="clr-namespace:Spirit.Controls" mc:Ignorable="d"
Name="ChatWindow"
Background="{StaticResource LightGrayBackground}"
Height="545" Width="680">[...]</UserControl>
This user control is active in shell, shell declaration is here.
<Window x:Class="Spirit.Views.ChatShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
Title="ChatShellView" Height="300" Width="300">
<DockPanel>
<Button x:Name="OpenTab"
Content="Open Tab"
DockPanel.Dock="Top" />
<TabControl x:Name="Items">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DisplayName}" />
<Button Content="X"
cal:Message.Attach="CloseItem($dataContext)" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</DockPanel>
</Window>
Result if some user constrol is active in this shell you can see on this image:
I would like stretch user control on maximum tab control witdh / height.
Remove Height="545" Width="680" in UserControl definition

How can I display my user control in the MainWindow?

I'm trying to build a small MVVM test application, but can't really figure how to display my user control in the MainWindow.
My Solution Explorer:
I got a resource dictionary:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:MVVM.ViewModel"
xmlns:vw="clr-namespace:MVVM.View">
<DataTemplate DataType="{x:Type vm:ViewModel}">
<vw:View />
</DataTemplate>
</ResourceDictionary>
I got my view:
<UserControl x:Class="MVVM.View.View"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<DataTemplate x:Key="PersonTemplate">
<StackPanel>
<TextBlock Text="{Binding FirstName}" />
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<ListBox ItemsSource="{Binding Path=Persons}"
ItemTemplate="{StaticResource PersonTemplate}" />
</UserControl>
and My MainWindow
<Window x:Class="MVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:MVVM.ViewModel"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary Source="MainWindowResources.xaml" />
</Window.Resources>
<Grid>
</Grid>
</Window>
The most obvious and easiest way is to add the ContentControl element:
<Grid>
<ContentControl x:Name="mainContentControl" />
</Grid>
And after that set the Content property of this control to your view model, and the corresponding view will be loaded and applied automatically:
this.mainContentControl.Content = new ViewModel.ViewModel();
But I would prefer to use another way without datatemplates:
<Grid>
<vw:View x:Name="mainView"/>
</Grid>
this.mainView.DataContext = new ViewModel.ViewModel();
Build your VS2010 solution, then, go to your MainWindow's XAML.
On the left, there is a toolbar with button "Toolbox"
Open it, it contains all the possible WPF controls you could add to your UI
Your UserControl should appear on top of the list (in a category probably named "MVVM Controls"), just drag&drop it to your UI :)

Access to PreviewKeyDown event of richTextBox in userControl

I would like to know how can I get access to event PreviewKeyDown of RichTextBox in UserControl.
For example, I have user Control and in this user control I have only one richTextBox:
Something like this:
<UserControl x:Class="Spirit.Controls.RichTextBoxControl"
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:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit.Extended"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<toolkit:RichTextBox Name="RichTextBox"
Grid.Row="0" PreviewKeyDown="?">
</toolkit:RichTextBox>
</Grid>
</UserControl>
I use this control in WPF window.
<Window x:Class="WpfApplication2.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:WpfApplication2.Controls" xmlns:WpfApplication2="clr-namespace:WpfApplication2" Title="Window2" Height="300" Width="300">
<Grid>
<Spirit.Controls:RichTextBoxControl Background="Red"
FontSize="13"
Margin="4,4,4,4"
Grid.Row="0"
Here I would like to acces to PreviewKeyDown of richTextBox/>
</Grid>
</Window>
I would like have access to PreviewKeyDown of richTextBox, bind some method on this event and have access to KeyEventArgs.
Something like this:
private void RichTextBoxInUserControl_PreviewKeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter )
{
//...
}
}
I noticed the Intellisence wasn't picking up on RichTextBox... in Window but you can subscribe to that event like this
<Spirit.Controls:RichTextBoxControl
Name="RichTextBoxInUserControl"
Background="Red"
FontSize="13"
Margin="4,4,4,4"
Grid.Row="0"
RichTextBox.PreviewKeyDown="RichTextBoxInUserControl_PreviewKeyDown"/>
where RichTextBox is the Name of the toolkit:RichTextBox specified in your UserControl

Resources