I'm working on a WPF application using the MVVM pattern, and I have hit a problem with focus.
I have full screen slide on 'overlays' and within each overlay I have a ContentPresenter that I use to display arbitrary view models/views by data binding it's content to a view model property I set in my data context, like so:
<Grid Name="OverlayContainer"
FocusManager.IsFocusScope="True"
KeyboardNavigation.TabNavigation="Cycle"
IsEnabled="False">
<Grid.RenderTransform>
<TranslateTransform x:Name="OverlayContainerTransform"
X="{Binding ElementName=OverlayContainer, Path=ActualWidth}"
Y="0"/>
</Grid.RenderTransform>
<ContentPresenter x:Name="OverlayContent" Content="{Binding Path=OverlayViewModel"/>
</Grid>
I can then dynamically set the OverlayViewModel property to various view models when needed and use data templates to get WPF to automatically display the correct view for the relevant view model:
<DataTemplate DataType="{x:Type ViewModels:AuthorisatonViewModel}">
<Views:AuthorisatonView/>
</DataTemplate>
When I change my view model and slide on the overlay I set focus scope to the overlay focus scope (which I seem to be able to do OK with OverlayContainer.Focus), but the problem I'm having is that I can't seem to get keyboard focus to go to the first focusable element on the relevant view, whatever it may be.
I thought I'd found what I needed here but when using this code to walk the visual tree it seems that when passing the ContentPresenter (OverlayContent) into VisualTreeHelper.GetChildrenCount() that it returns no children, so it can't get down the elements within the dynamic view.
I've also tried setting the OverlayContainer as the active focus scope and then calling:
OverlayContainer.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next))
but that failed to work also.
All the views I am trying to display have at least 1 focusable, visible, enabled element in them.
Any ideas?
It appears Rachel was spot one - it turned out it was that the view hadn't rendered yet, so the child visual elements weren't available yet. Calling my focuser like so:
// Focus on first child element only once rendered
this.OverlayContainer.Dispatcher.BeginInvoke(DispatcherPriority.Render,
new Action<FrameworkElement>(Focuser.FocusOnFirstFocusableChild),
this.OverlayContainer);
allowed me to access all the child visual elements and set focus accordingly.
Related
My goal is to display the X position of my control in a TextBlock as I drag it around.
xmlns:mb="http://schemas.microsoft.com/xaml/behaviors"
<cc:CardControl Name="SevenOfSpades" Canvas.Left="350" Canvas.Top="124" Width="60" Height="80" Face="S7">
<mb:Interaction.Behaviors>
<mb:MouseDragElementBehavior ConstrainToParentBounds="True"/>
</mb:Interaction.Behaviors>
</cc:CardControl>
<TextBlock Text="{Binding ElementName=SevenOfSpades, Path=(mb:Interaction.Behaviors)[0].X}"/>
I'm struggling with the syntax of the Binding Path. At runtime I get an exception:
InvalidOperationException: Property path is not valid. 'Interaction' does not have a public property named 'Behaviors'.
The property is there because the drag works when the TextBlock is removed. I've tried various combinations of parentheses, I even tried x:static. Any help?
Edit
Having reread WPF Attached Property Data Binding, it does not solve my problem. Path= is in the Xaml and parentheses are included. The error is not a binding error it's a runtime error that occurs inside InitializeComponent.
MouseDragElementBehavior is part of the Microsoft.Xaml.Behaviors.Wpf Nuget package installed into my project.
Ah, ok. In that case, the code for MouseDragElementBehavior is most certainly available, and even if it wasn't you could just open up the assembly with JustDecompile or something and browse it that way.
If you check the documentation for MouseDragElementBehavior you'll see this:
XProperty Dependency property for the X position of the dragged
element, relative to the left of the root element.
So basically you're trying to bind one dependency property (TextBlock.Text) to another (MouseDragElementBehavior.X), but in order for this to work they have to be part of the same visual or logical tree (which they aren't, MouseDragElementBehavior is a behavior). If one of them was an attached property then you could bind them directly, but in your case you have to link them together with either a property in your DataContext that supports INPC, or some kind of proxy object.
However, even if you do this, you're going to run into problems. If you click the "Go to Live Visual Tree" button while your application is running and look at the properties for your SevenOfSpades control you'll see this:
So far, so good. Now drag the control around a bit and repeat this process. Suddenly a RenderTransform field has appeared:
Looking back at the code for MouseDragElementBehavior reveals that sure enough, that behaviour does the drag by changing the render transform.
So basically you're trying to set the position with Canvas.Top/Canvas.Left, but the behaviour is setting it by applying a render transform offset. Pick one. I personally use MVVM where everything is implemented in the view model layer, so it's easy to bind Canvas.Top/Canvas.Left to properties there. If you want to continue using MouseDragElementBehavior then you'll need to bind both the position of your cards, as well as your TextBlock text, to the render transform instead:
<Canvas>
<Rectangle Name="SevenOfSpades" Width="60" Height="80" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform X="350" Y="124" />
</Rectangle.RenderTransform>
<mb:Interaction.Behaviors>
<mb:MouseDragElementBehavior ConstrainToParentBounds="True" />
</mb:Interaction.Behaviors>
</Rectangle>
<TextBlock Text="{Binding ElementName=SevenOfSpades, Path=RenderTransform.Value.OffsetX}" />
</Canvas>
I'm using an MVVM pattern for my WPF application. If the "home" view model, which controls the layout of my application's main window, I have a ChildViewModel property. This holds a viewmodel that can be switched according to what the user is doing. When they select menu items, the child view model switches and the main area of the screen (it's in an Outlook style) switches accordingly.
I do this with a ContentControl and DataTemplate like this: (I'm only showing one of the embeddable views here to keep it short).
<ContentControl Grid.Row="1" Grid.Column="1" Margin="3"
Content="{Binding ChildViewModel}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type vm:VersionsViewModel}">
<Embeddable:VersionsView />
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
I also want to add a ribbon to my main window, using the Telerik RadRibbonView control. I want this to have some fixed tabs and buttons that are always visible. In addition, I want to add and remove entire tabs, and buttons within existing tabs, according to the type of child view model. I'd like this to be done in the view in a similar manner to the way I've done the content control, above.
Is this possible? I've tried lots of things but got nowhere so far. I know I could do it by creating a huge "super ribbon" and binding visibility properties but this seems cludgey. I could also have multiple ribbons, each containing the common controls, but this would cause a maintenance problem.
In the end I went with the "super ribbon" approach, as I couldn't find any other way.
In the above image, child is a ContentPresenter. Its Content is a ViewModel. However, its ContentTemplate is null.
In my XAML, I have a TabControl with the following structure:
<local:SuperTabControlEx DataContext="{Binding WorkSpaceListViewModel}"
x:Name="superTabControl1" CloseButtonVisibility="Visible" TabStyle="OneNote2007" ClipToBounds="False" ContentInnerBorderBrush="Red" FontSize="24" >
<local:SuperTabControlEx.ItemsSource>
<Binding Path="WorkSpaceViewModels" />
</local:SuperTabControlEx.ItemsSource>
<TabControl.Template>
<ControlTemplate
TargetType="TabControl">
<DockPanel>
<TabPanel
DockPanel.Dock="Top"
IsItemsHost="True" />
<Grid
DockPanel.Dock="Bottom"
x:Name="PART_ItemsHolder" />
</DockPanel>
<!-- no content presenter -->
</ControlTemplate>
</TabControl.Template>
<TabControl.Resources>
<DataTemplate DataType="{x:Type vm:WorkSpaceViewModel}">
....
WorkSpaceViewModels is an ObservableCollection of WorkSpaceViewModel. This code uses the code and technique from Keeping the WPF Tab Control from destroying its children.
The correct DataTemplate - shown above in the TabControl.Resource - appears to be rendering my ViewModel for two Tabs.
However, my basic question is, how is my view getting hooked up to my WorkSpaceViewModel, yet, the ContentTemplate on the ContentPresenter is null? My requirement is to access a visual component from the ViewModel because a setting for the view is becoming unbound from its property in the ViewModel upon certain user actions, and I need to rebind it.
The DataTemplate is "implicitly" defined. The ContentPresenter will first use it's ContentTemplate/Selector, if any is defined. If not, then it will search for a DataTemplate resource without an explicit x:Key and whose DataType matches the type of it's Content.
This is discussed here and here.
The View Model shouldn't really know about it's associated View. It sounds like there is something wrong with your Bindings, as in general you should not have to "rebind" them. Either way, an attached behavior would be a good way to accomplish that.
I think the full answer to this question entails DrWPF's full series ItemsControl: A to Z. However, I believe the gist lies in where the visual elements get stored when a DataTemplate is "inflated" to display the data item it has been linked to by the framework.
In the section Introduction to Control Templates of "ItemsControl: 'L' is for Lookless", DrWPF explains that "We’ve already learned that a DataTemplate is used to declare the visual representation of a data item that appears within an application’s logical tree. In ‘P’ is for Panel, we learned that an ItemsPanelTemplate is used to declare the items host used within an ItemsControl."
For my issue, I still have not successfully navigated the visual tree in order to get a reference to my splitter item. This is my best attempt so far:
// w1 is a Window
SuperTabControlEx stc = w1.FindName("superTabControl1") as SuperTabControlEx;
//SuperTabItem sti = (SuperTabItem)(stc.ItemContainerGenerator.ContainerFromItem(stc.Items.CurrentItem));
ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(stc);
//ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(sti);
DataTemplate myDataTemplate = myContentPresenter.ContentTemplate;
The above code is an attempt to implement the techniques shown on the msdn web site. However, when I apply it to my code, everything looks good, except myDataTemplate comes back null. As you can see, I attempted the same technique on SuperTabControlEx and SuperTabItem, derived from TabControl and TabItem, respectively. As described in my original post, and evident in the XAML snippet, the SuperTabControlEx also implements code from Keeping the WPF Tab Control from destroying its children.
At this point, perhaps more than anything else, I think this is an exercise in navigating the Visual Tree. I am going to modify the title of the question to reflect my new conceptions of the issue.
I'm working on a WPF application which must handle multiple screens (two at this this time).
One view can be opened on several screens and user actions must be reflected consistently on all screens.
To achieve this, for a given type of view, a single DataContext is instantiated. Then, when a view is displayed on a screen, the unique DataContext is attached to it. So, one DataContext, several views (same type of view/xaml).
So far so good. It works quite well in most cases.
I do have a problem with a specific view which relies on ItemsControl. These ItemsControl are used to display UIElements dynamically build in the ViewModel/DataContext (C# code). These UIElements are mostly Path objects. Example :
<ItemsControl ItemsSource="{Binding WindVectors}">
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<Canvas IsItemsHost="True" />
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
Here, WindVectors is a ObservableCollection<UIElement>.
When the view is opened the first time, everything is fine. The problem is that when the view is opened one another screen, all ItemsControl are removed from the first screen and displayed one the second screen. Other WPF components (TextBlock for instance) on this view react normally and are displayed on both screens.
Any help would be greatly appreciated.
Thanks.
Fabrice
This is the expected behavior (ie been that way since winforms)- this is because the ObservableCollection is a reference. This wont happen with value types, only reference types.
The short answer is 'dont do that'. You could try looking into defining a collection view in the xaml or code a custom data provider and bind to one of those instead.
I've got a TabItem contanining a listbox, which has an obeservable collection of my feeds class as its item source. When I refresh/load the feeds into the collection I want to disable the main window so that the user can't go clicking other things while this process is running. So I set tbCtrl.isEnabled=false; to my tab control on the form. Then assign an event handler to the a custom finish event which is triggered after all the feeds are loaded.
This all works fine, however the hyperlinks for the results which are currently displayed on the tab control never get re-enabled (Nor do the next few which are out of view due to the list box size). All the other results further down are fine, as are the results on the other tab.
I've tried calling InvalidateVisual on the tab control after everything is finished, to see if that makes a difference but that doesn't seem to cause any change.
I could understand it if it was all Hyperlinks doing it, or just the ones currently displayed, but I don't understand why ones which are out of scroll are not working either.
I hit the same issue.
What I did is to bind HyperLink's IsEnabled to the parent, and put that in an App global resource.
<Style TargetType="{x:Type Hyperlink}">
<Setter Property="IsEnabled" Value="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type FrameworkElement}}}" />
</Style>
I found the answer for my case of the hyperlink not getting re-enabled, not sure if it applies to yours:
I found that when the Hyperlink's parent control is disabled (IsEnabled=false), the Hyperlink will not get notified of changes, e.g. IsEnabledChanged does not get fired, even when the bound property changes value.
My solution was to change my Xaml to no longer disable the ancestor control (which was causing the Hyperlink's parent to be disabled). With the parent (TextBlock) always enabled, now Hyperlink updates properly always.
(I'm a little bothered that the IsEnabled binding behaves differently than Controls do, and I'm not sure what I would do if I couldn't leave the ancestor enabled... but at least this lets me understand the issue I was having, and lets me work around it.)
Details: WPF 3.5 SP1
It's not just HyperLinks. It seems to be more specifically TextBlock which of course is what you use to wrap a HyperLink in WPF. This will give the same issue :
<TextBlock>
<Run Text="Barcode:"/>
<InlineUIContainer BaselineAlignment="Center">
<TextBox Text="{Binding OriginalPackage.BarcodeNumber}" />
</InlineUIContainer>
</TextBlock>
I was hoping setting IsEnabled="True" would fix it but it doesn't seem to.
The easy solution is to use a StackPanel with Orientation="Horizontal"