I've got an interesting UI problem. I've got a RadBusyIndicator from Telerik wrapped inside of a UserControl (for ease of switching to the Windows busy indicator if the Telerik one still has a memory leak). When I put content into the control, if it has anything more than a ContentControl in between the opening and closing tags of the wrapper control, everything with an x:Name attribute is null in the code behind and causes an exception when the page is loaded.
Here is a likeness of the code with names removed to protect the innocent.
The xaml...
<UserControl>
<Grid x:Name="Indicator">
<telerik:RadBusyIndicator x:Name="BusyIndicator" IsBusy="{Binding Path=IsStatusBusy, Mode=TwoWay}" BusyContent="{Binding Path=WaitingContent, Mode=TwoWay}" Content="{Binding Path=UserContent, Mode=TwoWay}"/>
</Grid>
</UserControl>
And the code behind...
[ContentProperty("UserContent")]
public partial class CustomBusyIndicator : UserControl
{
public CustomBusyIndicator()
{
InitializeComponent();
Indicator.DataContext = this;
}
public UIElement UserContent
{
get { return (UIElement)GetValue(UserContentProperty); }
set { SetValue(UserContentProperty, value); }
}
private static readonly DependencyProperty UserContentProperty = DependencyProperty.Register("PageContent",
typeof(UIElement), typeof(CustomBusyIndicator), new PropertyMetadata(null));
private static readonly DependencyProperty WaitingContentProperty = DependencyProperty.Register("WaitingContent",
typeof (object), typeof (CustomBusyIndicator), new PropertyMetadata(null, OnWaitingContentChanged));
private static void OnWaitingContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{}
private static readonly DependencyProperty IsStatusBusyProperty = DependencyProperty.Register("IsStatusBusy",
typeof (bool), typeof (CustomBusyIndicator), new PropertyMetadata(false, OnIsStatusBusyChanged));
private static void OnIsStatusBusyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{}
public bool IsStatusBusy
{
get { return (bool) GetValue(IsStatusBusyProperty); }
set { SetValue(IsStatusBusyProperty, value); }
}
public object WaitingContent
{
get { return GetValue(WaitingContentProperty); }
set { SetValue(WaitingContentProperty, value); }
}
}
And I'm using it like this.....
<CustomBusyIndicator IsStatus={Binding IsBusy}>
<CustomBusyIndicator.WaitingContent>
<TextBlock Text="Loading..." Foreground="Black" />
</CustomBusyIndicator.WaitingContent>
<Grid>
.
.
.
.
</Grid>
</CustomBusyIndicator>
Any ideas? Thanks in advance for your help!
Edit
I've now established that it is the x:Name that seems to be causing the issues. They are null in the code behind after InitializeComponent() is called.
You are deriving from UserControl, so what happens... let's see:
Your class inherits a public property called Content and exactly this property is the dedicated ContentProperty of the baseclass, caused by an annotation like [ContentProperty("Content")] at the baseclass level.
That's the reason why normaly everything you declare in the xaml-part of you userControl definition is showing up when loaded.
So when you see this...
<UserControl ... >
<Grid x:Name="Indicator">
<telerik:RadBusyIndicator x:Name="BusyIndicator" ... />
</Grid>
</UserControl>
it is technically the same as writing this:
<UserControl ... >
<UserControl.Content>
<Grid x:Name="Indicator">
<telerik:RadBusyIndicator x:Name="BusyIndicator" ... />
</Grid>
</UserControl.Content>
</UserControl>
That means whenever you use your UserControl somewhere in your xaml and add content the way you did...
<CustomBusyIndicator ...>
<Grid> ... </Grid>
</CustomBusyIndicator>
...you are overwriting everything that was declared inside the xaml-part of the UserControl definition (and it does not matter that you annotated another property to be the ContentProperty, this just means you set the new ContentProperty twice).
So what are your options now:
Option Number 1: Keep UserControl as your base, but use your property UserContent only explicitly
so the usage would look like this:
<CustomBusyIndicator ...>
<CustomBusyIndicator.UserContent>
<Grid> ... </Grid>
</CustomBusyIndicator.UserContent>
</CustomBusyIndicator>
Option Number 2: derive from Control or ContentControl and transform your UserControl's xaml-part into a default ControlTemplate
that way you can use it like this
<CustomBusyIndicator ...>
<Grid> ... </Grid>
</CustomBusyIndicator>
but you have to make sure your template is found when the xaml is parsed. I usually do the following:
create a ResourceDictionary CustomBusyIndicator.xaml
add an entry to themes/generic.xaml that includes the dictionary
add DefaultStyleKey = typeof(CustomBusyIndicator); to your control's constructor
add an implicit style to CustomBusyIndicator.xaml
And this has another ramification. You cannot use named elements as easily as before: you have to write an override for OnApplyTemplate and get references to those named elements via GetTemplateChild("BusyIndicator") as RadBusyIndicator;
Option Number 3: Keep UserControl as your base, and UserContent as the ContentProperty, but set the xaml-part explicitly
so the definition would look like this:
<UserControl ... >
<UserControl.Content>
<Grid x:Name="Indicator">
<telerik:RadBusyIndicator x:Name="BusyIndicator" ... />
</Grid>
</UserControl.Content>
</UserControl>
Related
I have the following scenario and hierarchy of XAML elements in my page:
<Page> ....
<StackPanel> ...
<Grid> ....
<StackPanel>
<uc:MyUserControl
ReferencedButton={Binding ElementName=RightButton} />
<Button x:Name="RightButton" Click="{x:Bind ViewModel.OpenFlyout}" Content="Clickme" />
</StackPanel>
......
Then the code behind from 'MyUserControl'
public UIElement ReferencedButton
{
get { return (UIElement)GetValue(ReferencedButtonProperty); }
set { SetValue(ReferencedButtonProperty, value); }
}
public static readonly DependencyProperty ReferencedButtonProperty =
DependencyProperty.Register(nameof(ReferencedButton), typeof(UIElement), typeof(MyUserControl), null);
So far so good, however I was expecting that in my code behind, the 'ReferencedButton' property would be filled with a reference to the 'RightButton' button. However it always returns null.
I even tried:
{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, ElementName=RightButton}
I know it is possible to bind the element, because I got the example from a DevExpress component, but still without any success.
I am following the suggestions/rules from the following docs:
Binding ElementName
XAML Namescopes
p.s: I know that I can pass the reference to the button in my code behind however I would like to do this through XAML itself.
It turns out that I needed to use a PropertyChangedCallback to make it work. So the solution is as below:
public static readonly DependencyProperty ReferencedButtonProperty=
DependencyProperty.Register(nameof(ReferencedButton),
typeof(UIElement),
typeof(MyUserControl),
new PropertyMetadata(default(UIElement),
new PropertyChangedCallback(PlacementCallBack)));
and in the code behind of my control I can access and set the value by implementing the PlacementCallBack like this:
public static void PlacementCallBack(object sender, DependencyPropertyChangedEventArgs e)
{
var myuserControl = sender as MyUserControl;
myuserControl.ReferencedButton = e.NewValue as UIElement;
}
The object DependencyPropertyChangedEventArgs contains two propeties NewValue and OldValue, they hold the old and new values of the previous object set.
I created a user control that looks like a tile. Created another user control named TilePanel that serves as the default container of the tiles. And lastly, the very UI that looks like a Window start screen. I used RelayCommand to bind my TileCommands
Here are the codes:
Tilev2.xaml
<UserControl x:Class="MyNamespace.Tilev2"
Name="Tile"....
>
...
<Button x:Name="btnTile" Style="{StaticResource TileStyleButton}" Command="{Binding ElementName=Tile, Path=TileClickCommand}" >
</Button>
</UserControl>
Tilev2.xaml.cs
public partial class Tilev2 : UserControl
{
public Tilev2()
{
InitializeComponent();
}
//other DPs here
public ICommand TileClickCommand
{
get { return (ICommand)GetValue(TileClickCommandProperty); }
set { SetValue(TileClickCommandProperty, value); }
}
// Using a DependencyProperty as the backing store for TileClickCommand. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TileClickCommandProperty =
DependencyProperty.Register("TileClickCommand", typeof(ICommand), typeof(Tilev2));
}
}
Then I created a TilePanel user control as the container of the tiles
TilePanel.xaml
<UserControl x:Class="MyNamespace.TilePanel"
...
>
<Grid>
<ScrollViewer>
<ItemsControl Name="tileGroup"
ItemsSource="{Binding TileModels}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local2:Tilev2 TileText="{Binding Text}"
TileIcon="{Binding Icon}"
TileSize="{Binding Size}"
TileFontSize="{Binding FontSize}"
Background="{Binding Background}"
TileCaption="{Binding TileCaption}"
TileCaptionFontSize="{Binding TileCaptionFontSize}"
TileClickCommand="{Binding TileCommand}"
/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</UserControl>
TilePanel.xaml.cs
public partial class TilePanel : UserControl
{
public TilePanel()
{
InitializeComponent();
DataContext = new TilePanelViewModel();
}
public TilePanelViewModel ViewModel
{
get { return (TilePanelViewModel)this.DataContext; }
}
}
My ViewModel for TilePanel
TilePanelViewModel.cs
public class TilePanelViewModel : ViewModelBase
{
private ObservableCollection _tileModels;
public ObservableCollection<TileModel> TileModels
{
get
{
if (_tileModels == null)
_tileModels = new ObservableCollection<TileModel>();
return _tileModels;
}
}
}
Then my Tile model
TileModel.cs
public class TileModel : BaseNotifyPropertyChanged
{
//other members here
ICommand tileCommand { get; set; }
//other properties here
public ICommand TileCommand
{
get { return tileCommand; }
set { tileCommand = value; NotifyPropertyChanged("TileCommand"); }
}
}
}
This is my StartScreen View where TilePanels with tiles should be displayed...
StartScreen.xaml
<UserControl x:Class="MyNamespace.StartMenu"
... >
<Grid>
<DockPanel x:Name="dockPanel1" Grid.Column="0" Grid.Row="1" Margin="50,5,2,5">
<local:TilePanel x:Name="tilePanel"></local:TilePanel>
</DockPanel>
</Grid>
</UserControl>
StartScreen.xaml.cs
public partial class WincollectStartMenu : UserControl, IView<StartMenuViewModel>
{
public WincollectStartMenu()
{
InitializeComponent();
}
public StartMenuViewModel ViewModel { get { return (DataContext as StartMenuViewModel); } }
private void UserControl_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
ViewModel.Tile = tilePanel.ViewModel.TileModels;
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
return;
}
}
In my start screen ViewModel, I used ObservableCollection Tile
and use Tile.Add(tile); to populate my start screen with Tiles inside the TilePanel...
StartMenuViewModel.cs
TileModel tile = new TileModel() { Text = "Testing1", FontSize = 11, Size = TileSize.Medium, Background = (SolidColorBrush)new BrushConverter().ConvertFromString("#039BE5"), Tag="Something" };
tile.TileCommand = new RelayCommand(
p => Tile_TileClick(tile.Tag),
p => true
);
temp.Add(tile);
Now the problem is, if I add a new code below, tile = new TileModel() {...}
tile.TileCommand = new RelayCommand(...), even if I clicked on the first tile, my Tile_TileClick() will get the second tile's info (or the last tile inserted)...
Am I doing something wrong? Or Im doing everything wrong...?
This is not direct answer to your question, but hopefully it will give you few thoughts.
Ok, first of all, don't name your usercontrol like this:
<UserControl x:Class="MyNamespace.Tilev2" Name="Tile"/>
because the name can be easily overriden when using the usercontrol somewhere:
<local:Titlev2 Name="SomeOtherName" />
and the binding inside Tilevs with ElementName won't work: Command="{Binding ElementName=Tile, Path=TileClickCommand}"
Second, what's the point of Tilev2 usercontrol? Why don't just put the button directly to the DataTemplate inside TilePanel class?
If you need to reuse the template, you can put the template to resource dictionary.
If you need some special presentation code in the Tilev2 codebehind or you need to use the Tilev2 without viewmodel, it's better to create custom control instead of usercontrol in this case. it has much better design time support, and writing control templates it's easier (Triggers, DataTriggers, TempalteBinding, etc). If you used custom Control insead UserControl, you wouldn't have to write {Binding ElementName=Tile, Path=TileClickCommand}, or use RelativeSource, etc.
Third, it seems like you forced MVVM pattern where you can't really take advantage of it. Point of MVVM is separate application logic from presentation. But your Tile and TilePanel usercontrols are just presentation. You application logic could be in StartScreen which is concrete usage of TileName.
I would create custom controls called TilePanel (potentionally inherited from ItemsControl, Selector or ListBox) and if needed also for Tile. Both controls should not be aware of any viewmodels. There's absolutelly no need for that.
Take ListBox as an example. ListBox does not have viewmodel but can be easily used in MVVM scenarios. Just because ListBox it is not tied to any viewmodel, it can be databound to anything.
Just like ListBox creates ListBoxItems, or
Combobox creates ComboBoxItems, or
DataGrid creates DataGridRows or
GridView (in WinRT) creates GridViewRow, your TilePanel could create Tiles.
Bindings to tile specific properties, like Icon or Command could be specified in TilePanel.ItemContainerStyle orusing simillar appriach like DisplayMemberPath, resp ValueMemberPath in ListBox.
final usage could the look like:
<TilePanel ItemsSource="{Bidning ApplicationTiles}" />
or
<TilePanel>
<Tile Icon=".." Command=".." Text=".." />
<Tile Icon=".." Command=".." Text=".." />
</TilePanel>
Last, the name `TilePanel' evoked that it is some kind of panel like StackPanel, WrapPanel, etc. In other words, it is FrameworkElement inherited from Panel.
TilesView would be more suitable name for the control than TilePanel. The -View postfix is not from MVVM, it just follows naming convention -GridView, ListView...
Saw the problem...
To pass a parameter from button, I used CommandParameter so I could use it in switch-case scenario to know which button was clicked. But still, param was still null...
<Button x:Name="btnTile" Style="{StaticResource TileStyleButton}" CommandParameter="{Binding}" Command="{Binding Path=TileClickCommand, ElementName=Tile}" >
</Button>
TileCommand = new MyCommand() { CanExecuteFunc = param => CanExecuteCommand(), ExecuteFunc = param => Tile_TileClick(param)}
After 2 whole damn days, I changed it:
From this:
<UserControl Name="Tile"...>
<Button x:Name="btnTile" Style="{StaticResource TileStyleButton}" CommandParameter="{Binding Tag, ElementName=Tile}" Command="{Binding Path=TileClickCommand, ElementName=Tile}" >
</Button>
</UserControl>
To this:
<UserControl Name="Tile"...>
<Button x:Name="btnTile" Style="{StaticResource TileStyleButton}" CommandParameter="{Binding}" Command="{Binding Path=TileClickCommand, ElementName=Tile}" >
</Button>
</UserControl>
My first post does error because CommandParameter does not know where to get its DataContext so I replaced it to CommandParameter={Binding} so it will get whatever from the DataContext.
I'm trying to create a simple Bindable property called MyBoolValue in my UserControl class
First, here the xaml
<UserControl x:Class="TMDE.Controls.SimNaoRadioPicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="16"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" Content="Teste" IsChecked="{Binding Path=MyBoolValue}" x:Name="chk" />
</Grid>
</UserControl>
And here the code-behind:
public partial class SimNaoRadioPicker : UserControl
{
public SimNaoRadioPicker()
{
InitializeComponent();
}
public bool? MyBoolValue
{
get
{
return (bool?)GetValue(MyCustomPropertyProperty);
}
set
{
SetValue(MyCustomPropertyProperty, value);
}
}
// Using a DependencyProperty as the backing store for MyCustomProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MyCustomPropertyProperty =
DependencyProperty.Register("MyBoolValue",
typeof(bool?), typeof(SimNaoRadioPicker),
new UIPropertyMetadata(MyPropertyChangedHandler));
public static void MyPropertyChangedHandler(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
// Get instance of current control from sender
// and property value from e.NewValue
// Set public property on TaregtCatalogControl, e.g.
((SimNaoRadioPicker)sender).chk.IsChecked = (bool?)e.NewValue;
}
}
Now, when a try to use this control in another Window, like this:
<my:SimNaoRadioPicker x:Name="test" MyBoolValue="{Binding QCV_Localizacao_Reutilizacao}" Height="16" HorizontalAlignment="Left" Margin="287,456,0,0" VerticalAlignment="Top" Width="167" />
the Binding doesnt working, the property QCV_Localizacao_Reutilizacao doesnt get update and vice-versa.
The DataContext of the Window its a class that implements INotifyPropertyChanged, so the
property "QCV_Localizacao_Reutilizacao" should work ok.
Also if I use a regular CheckBox instead of my UserControl, its works okay
What I'm doing wrong?
I would remove the nullable part of the boolean and just make it a boolean, then set binding modes to two way.
There are two major issues -
First, your binding mode needs to be TwoWay which you can achieve in two ways -
Either specifed it to be TwoWay in xaml like this -
<my:SimNaoRadioPicker MyBoolValue="{Binding QCV_Localizacao_Reutilizacao,
Mode=TwoWay}"/>
The drawback with above apporach is that you have to explicitly set the mode whenever you are using the UserControl's instance.
Another approach would be to modify your DP itself to say that it always be bind by default in a TwoWay mode like this using FrameworkPropertyMetadata -
public static readonly DependencyProperty MyCustomPropertyProperty =
DependencyProperty.Register("MyBoolValue",
typeof(bool?), typeof(SimNaoRadioPicker),
new FrameworkPropertyMetadata(false,
FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
MyPropertyChangedHandler));
Secondly, QCV_Localizacao_Reutilizacao property lies in your Window's DataContext. But, by default any control will look for binding in its own dataContext so you explicilty need to tell it to look into Window's DataContext using RelativeSource like this -
<my:SimNaoRadioPicker MyBoolValue="{Binding QCV_Localizacao_Reutilizacao,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=Window}/>
Is there a way to set Focus from one control to another using WPF Triggers?
Like the following example:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Name="txtName"></TextBox>
<TextBox Grid.Row="1" Name="txtAddress"></TextBox>
<Button Grid.Row="2" Content="Finish">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<!-- Insert cool code here-->
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Page>
Is there a way for this EventTrigger to put to focus on the textBox "txtName"?
I am trying to find the way to do something like this using strict MVVM. If this is something that should not be done via the XAML (in MVVM) then that is fine. But I would like to see some kind of documentation as to how it fit in the MVVM pattern doing it outside the XAML.
Have you considered using an attached behaviour. They are simple to implement and use AttachedProperty's. Although it still requires code, this code is abstracted away in a class and be reused. They can eliminate the need 'code behind' and are often used with the MVVM pattern.
Try this one and see if it works for you.
public class EventFocusAttachment
{
public static Control GetElementToFocus(Button button)
{
return (Control)button.GetValue(ElementToFocusProperty);
}
public static void SetElementToFocus(Button button, Control value)
{
button.SetValue(ElementToFocusProperty, value);
}
public static readonly DependencyProperty ElementToFocusProperty =
DependencyProperty.RegisterAttached("ElementToFocus", typeof(Control),
typeof(EventFocusAttachment), new UIPropertyMetadata(null, ElementToFocusPropertyChanged));
public static void ElementToFocusPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
var button = sender as Button;
if (button != null)
{
button.Click += (s, args) =>
{
Control control = GetElementToFocus(button);
if (control != null)
{
control.Focus();
}
};
}
}
}
And then in your XAML do something like...
<Button
Content="Click Me!"
local:EventFocusAttachment.ElementToFocus="{Binding ElementName=textBox}"
/>
<TextBox x:Name="textBox" />
I'm not near visual studio so I can't actually try this right now, but off the top of my head, you should be able to do something like this:
FocusManager.FocusedElement="{Binding ElementName=txtName}">
Edit:
There is a followup question (asked more recently) about this here: How to set autofocus only in xaml? which contains this method, and a few different ideas on how to use it.
You could also use a WPF Behavior...
public class FocusElementAfterClickBehavior : Behavior<ButtonBase>
{
private ButtonBase _AssociatedButton;
protected override void OnAttached()
{
_AssociatedButton = AssociatedObject;
_AssociatedButton.Click += AssociatedButtonClick;
}
protected override void OnDetaching()
{
_AssociatedButton.Click -= AssociatedButtonClick;
}
void AssociatedButtonClick(object sender, RoutedEventArgs e)
{
Keyboard.Focus(FocusElement);
}
public Control FocusElement
{
get { return (Control)GetValue(FocusElementProperty); }
set { SetValue(FocusElementProperty, value); }
}
// Using a DependencyProperty as the backing store for FocusElement. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FocusElementProperty =
DependencyProperty.Register("FocusElement", typeof(Control), typeof(FocusElementAfterClickBehavior), new UIPropertyMetadata());
}
Here is the XAML to use the behavior.
Include namespaces:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:local="clr-namespace:WpfApplication1"
Attach WPF Behavior to button and bind element you want to set focus to:
<Button Content="Focus" Width="75">
<i:Interaction.Behaviors>
<local:FocusElementAfterClickBehavior FocusElement="{Binding ElementName=CheckBoxComboBox, Mode=OneWay}"/>
</i:Interaction.Behaviors>
</Button>
<ComboBox x:Name="CheckBoxComboBox" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Grid.Row="1"/>
So this way you have no code behind and it is reusable on any control that inherits from ButtonBase.
Hope this helps someone.
you need a TriggerAction to invoke the Focus() method on the desired control.
public class SetFocusTrigger : TargetedTriggerAction<Control>
{
protected override void Invoke(object parameter)
{
if (Target == null) return;
Target.Focus();
}
}
To have the focus set to a Control , you place a Triggers collection after your LayoutRoot (or any control really), select the event as the trigger, and select the SetFocusTrigger as the class to run. In the SetFocusTrigger declaration, you put the name of the control that you want to receive the focus by using the TargetName property.
<Button x:Name="LayoutRoot" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Clicked">
<local:SetFocusTrigger TargetName="StartHere"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBox x:Name="StartHere"/>
</Button>
Is this what you want?
<TextBox Name="txtName"></TextBox>
<TextBox Grid.Row="1" Name="txtAddress"></TextBox>
<Button Grid.Row="2" Content="Finish">
<Button.Style>
<Style TargetType="{x:Type Button}">
<EventSetter Event="Click" Handler="MoveFocusOnClick" />
</Style>
</Button.Style>
<!--<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
</EventTrigger>
</Button.Triggers>-->
</Button>
c#:
public void MoveFocusOnClick(object sender, RoutedEventArgs e)
{
Keyboard.Focus(txtName); // Or your own logic
}
This is the same as Ian Oakes' solution, but I made a couple minor changes.
The button type can be more general, namely ButtonBase, to handle more cases, such as ToggleButton.
The target type can also be more general, namely UIElement. Technically, this could be IInputElement, I suppose.
Made the event handler static so that it won't generate a runtime closure every time this is used.
[edit: 2019] Updated to use null-conditional and C#7 expression body syntax.
Many thanks to Ian.
public sealed class EventFocusAttachment
{
public static UIElement GetTarget(ButtonBase b) => (UIElement)b.GetValue(TargetProperty);
public static void SetTarget(ButtonBase b, UIElement tgt) => b.SetValue(TargetProperty, tgt);
public static readonly DependencyProperty TargetProperty = DependencyProperty.RegisterAttached(
"Target",
typeof(UIElement),
typeof(EventFocusAttachment),
new UIPropertyMetadata(null, (b, _) => (b as ButtonBase)?.AddHandler(
ButtonBase.ClickEvent,
new RoutedEventHandler((bb, __) => GetTarget((ButtonBase)bb)?.Focus()))));
};
Usage is basically the same as above:
<ToggleButton z:EventFocusAttachment.Target="{Binding RelativeSource={RelativeSource Self}}" />
Note that the event can target/focus the originating button itself.
Look if you're using any Dispatcher then it would be helpful but this is a short trick I used in my code. Just use the Loaded event in your XAML and make a new handler. In that handler paste this code and bingo! you're ready to go
Your loaded event with some arguments here...
{
Dispatcher.CurrentDispatcher.BeginInvoke(DispatcherPriority.Normal, new System.Action(() => {
The element to be focused goes here......
}));
}
PS: It requires Windows. Threading if you didn't know ;)
I have a simple User Control
Xaml:
<UserControl x:Class="GraemeGorman_Controls.Navigation.NavigationItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Border x:Name="borderLayoutRoot">
<TextBlock x:Name="textBlockCaption" Text="{Binding Caption}" />
</Border>
</UserControl>
Cs:
namespace GraemeGorman_Controls.Navigation
{
public partial class NavigationItem : UserControl
{
public static readonly DependencyProperty CaptionProperty = DependencyProperty.Register(
"Caption",
typeof (string),
typeof (NavigationItem),
new PropertyMetadata(new PropertyChangedCallback(OnCaptionChanged)));
public string Caption
{
get {return (string)GetValue(CaptionProperty);}
set {SetValue(CaptionProperty, value);}
}
public NavigationItem()
{
InitializeComponent();
}
private static void OnCaptionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
//null
}
}
}
What my issue is, when I create an instance of the control the caption never shows - now i have tested the property in the OnCaptionChanged function using e.NewValue and it is the correct value. What is wrong with my binding?
If I write in the code behind caption property for set
textBlockCaption.Text = value;
It appears fine...
Any help appreciated
Thanks
Graeme
From the code-behind it looks like you are missing one line of code.
Try to add DataContext = this; in your constructor. This has worked for me in the past.
How are you creating the instance of the NavigationItem control?
you'll need to do something like:
<Page ...
xmlns:gg="clr-namespace:GraemeGorman_Controls.Navigation">
<gg:NavigationItem Caption="FooBar" />
or even
<gg:NavigationItem Caption="{Binding Path=TheCaption}" />
where TheCaption is a property of your Page's DataContext (eg your ViewModel)
Hope This Helps :)