WPF window hosting usercontrol - wpf

I have a usercontrol that I use to edit some objects in my application.
I have recently come to an instance where I want to pop up a new dialog (window) which will host this usercontrol.
How do I instantiate the new window and pass any properties that need to be set from the window to the usercontrol?
Thanks for your time.

You can simply set the content of your new window to your user control. In code, this would be something like this:
...
MyUserControl userControl = new MyUserControl();
//... set up bindings, etc (probably set up in user control xaml) ...
Window newWindow = new Window();
newWindow.Content = userControl;
newWindow.Show();
...

You need to:
Create some public properties on your dialog Window to pass in the values
Bind your UserControl to those public properties in your dialog Window
Show your dialog Window as dialog when needed
(optional) retrieve values from the window that are two-way bound to your user control
Here's some pseudocode that looks remarkably like C# and XAML:
How to show a window as a dialog:
var myUserControlDialog d = new MyUserControlDialog();
d.NeededValueOne = "hurr";
d.NeededValueTwo = "durr";
d.ShowDialog();
and the source
public class MyUserControlDialog : Window
{
// you need to create these as DependencyProperties
public string NeededValueOne {get;set;}
public string NeededValueTwo {get;set;}
}
and the xaml
<Window x:Class="MyUserControlDialog" xmlns:user="MyAssembly.UserControls">
<!-- ... -->
<user:MyUserControl
NeededValueOne="{Binding NeededValueOne, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
NeededValueTwo="{Binding NeededValueTwo, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
</Window>
you'd do the same thing in your UserControl as you've done in your window to create public properties and then bind to them within the xaml.

Related

Update bindings for control created in code

I have created a UserControl, which has some values bound to its view model.
I want to create an instance of that UserControl, provide it with a view model, and save it to an image without actually showing it on screen anywhere.
The problem is that when I create an instance of the UserControl and give it its view model, the bindings don't update. So the image that I am saving is the control without any data in it.
How can I force all the bindings to update for a user control that I am creating in code, without actually displaying it on screen?
Here is a short example I wrote:
UserControl1.xaml:
<Grid>
<TextBlock Name="txt" Text="{Binding}" />
</Grid>
UserControl1.xaml.cs
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
internal string GetText()
{
return txt.Text;
}
}
Test.cs
public void Test()
{
UserControl1 uc1 = new UserControl1();
uc1.DataContext = "Test";
Console.WriteLine("The text is " + uc1.GetText());
}
I am expecting it to print out "The text is Test", but it actually prints out "The text is".
I managed to get around the problem by setting the DataContext before calling InitializeComponent. In order to do this, I created a new constructor for my user control that looks like this:
public UserControl1(object viewModel)
{
DataContext = viewModel;
InitializeComponent();
}
If I use this constructor, the bindings will work even if I never show the control on screen.

How to pass my view model to a user to main view model?

I made a main window that displays various user controls in a content control. In this window, I have the user controls and their accompanying view models in the XAML as DataTemplate Resources. This window has a button that needs to display the user control in the contentcontrol and instantiate the view model for it. How can i pass the resource to my RelayCommand, so that i can tell the command which user control and view model to use? I figured out how to pass a hard-coded string as the command parameter, but now I'm wanting to pass the x:Name so i can reuse this command etc for more than one View-ViewModel.
Main Window's XAML snippets:
<Window.Resources>
<!--User Controls and Accompanying View Models-->
<DataTemplate DataType="{x:Type EmployerSetupVM:EmployerSetupVM}" x:Key="EmployerSetup" x:Name="EmployerSetup">
<EmployerSetupView:EmployerSetupView />
</DataTemplate>
<DataTemplate DataType="{x:Type VendorSetupVM:VendorSetupVM}">
<VendorSetupView:VendorSetupView />
</DataTemplate>
</Window.Resources>
<Button Style="{StaticResource LinkButton}" Command="{Binding ShowCommand}" CommandParameter="{StaticResource EmployerSetup}">
...
In the Main Window's ViewModel, here relevant code so far:
public RelayCommand<DataTemplate> ShowCommand
{
get;
private set;
}
ShowCommand = new RelayCommand<string>((s) => ShowExecuted(s));
private void ShowExecuted(DataTemplate s)
{
var fred = (s.DataType); //how do i get the actual name here, i see it when i hover with intellisense, but i can't access it!
if (!PageViewModels.Contains(EmployerSetupVM))
{
EmployerSetupVM = new EmployerSetupVM();
PageViewModels.Add(EmployerSetupVM);
}
int i = PageViewModels.IndexOf(EmployerSetupVM);
ChangeViewModel(PageViewModels[i]);
}
...
in other words, how do i get the name of the my DataTemplate w/ x:Key="EmployerSetup" in the XAML? If it matters, I'm using MVVMLight too
Try using the Name property of the class Type:
private void ShowExecuted(DataTemplate s) {
var typeName = s.DataType as Type;
if (typeName == null)
return;
var className = typeName.Name; // className will be EmployerSetupVM or VendorSetupVM
...
}
I'd still say passing the DataTemplate to the VM just seems strange. I'd just have two commands and switch the command used in the Button.Style according to the conditions you got.
If you "have" to use a single RelayCommand or the world might end, I'd tend to use a static enum that you can reference from xaml for CommandParameter than pass the whole DataTemplate object.

Can I add a DependencyProperty on an windows user control?

I'm trying to host a Visio ActiveX object in a WPF application.
To do this, I created a Windows user control project where I add the Visio object. This windows user control is then hosted on an WPF user control in an WindowsFormsHost object.
<WindowsFormsHost Name="wfHost" Grid.Row="1">
<wf:VisioUserControl FileNamePath="?"/>
</WindowsFormsHost>
What I would like to do is to bind the value of the FileNamePath member to the value of a TextBox element which defines the path.
The project follows the MVVM pattern, so there is no way that I can access the VisioUserControl object in my ViewModel.
The solution I was thinking about is to bind the FileNamePath member to the value of the TextBox that contains the path, but it is not a DependencyProperty and it seems that I'm not able to define one in the code behind of the windows user control.
So, is there any workaround to perform this binding?
Thanks in advance.
You can solve this by creating a UserControl that wraps your VisioUserControl (I wrote a simple tutorial on UserControl creation here). You can then add a FileNamePath dependency property to your UserControl. In the property changed handler of this dependency property, set the FileNamePath property on the VisioUserControl that this user control wraps.
Ok I have created an example of a WPF usercontrol that is hosting a Winforms control, with a dependency property that is bound to the winforms control's text property.
public partial class ActiveXObjectHoster : UserControl
{
private static System.Windows.Forms.Label testObject;
public ActiveXObjectHoster()
{
InitializeComponent();
testObject = new System.Windows.Forms.Label();
windowsFormsHost1.Child = testObject;
}
#region Properties
public static DependencyProperty FileNameProperty = DependencyProperty.Register("FileName", typeof(string), typeof(ActiveXObjectHoster), new UIPropertyMetadata("",new PropertyChangedCallback(OnFileNamePropertyChanged)));
public string FileName
{
get { return (string)GetValue(FileNameProperty); }
set
{
SetValue(FileNameProperty, value);
}
}
private static void OnFileNamePropertyChanged(
DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
testObject.Text = (string)e.NewValue;
}
#endregion
}
Here is the xaml of the control (its very simple)
<UserControl xmlns:my="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
x:Class="WPFTestApp2.Controls.ActiveXObjectHoster"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="ObjectHost"
Height="100" Width="100">
<Grid>
<my:WindowsFormsHost x:Name="windowsFormsHost1" />
</Grid>
</UserControl>
What you need to do is change the test object from a Label to whatever Visio object you were using. Then in the property callback change the text property to the filename or whatever property you wanted.
As mentioned above this is done in the code behind, but that is fine for a user control, its completely decoupled from whatever thing is using it, you just need to bind to the filename property of the control.
Here is a link to a project I created showing how the control is used. There is a textbox whos text is bound to the FileName property, which changes the Winforms Labels text.
You can place this in a Winforms Usercontrol if you want to use it in winforms (like you mentioned in your reply to my comment)
Try replacing the label for your control and see if it works.
Why not implement a UserControl to wrap the WindowsFormHost and the Visio user control? Then you cann add a Dependency Property, and implement in the code behind a handler for the PropertyChangedCallback, and appropiately interact with the WinForms control

Binding to DependencyProperty in UserControl

I have a form with two different UserControls - one that contains a Telerik RadGridView and the other that that contains a Telerik DataForm.
The grid usercontrol is bound to a ViewModel that includes a property that exposes the Items collection that the grid is bound to.
When I bind the form to that property, everything works fine.
But I need to access additional info in the form control that really doesn't belong in the grid control's viewmodel.
So I thought I'd add a property to the form usercontrol, and bind it to the items collection:
<local:FormControl x:Name="formControl"
ItemsSource="{Binding items}"
/>
In the form's code-behind, I added a normal property:
private object itemsSource;
public object ItemsSource
{
get { return this.itemsSource; }
set { this.itemsSource = value; }
}
And this didn't work, of course. I got errors about having to use a DependencyProperty. Which I thought was reassuring - the page was actually trying to bind to the property I thought it should.
So I converted this to a DependencyProperty:
public static DependencyProperty ItemsSourceProperty =
DependencyProperty.Register("ItemsSource", typeof(object), typeof(FormControl));
public object ItemsSource
{
get { return GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
That compiled and ran without errors. Except, of course, that the control's viewmodel didn't have any items. So next was to try to pass the ItemsSource property to the form control's viewmodel:
public FormControl()
{
InitializeComponent();
this.DataContext = new FormControlVM(this.ItemsSource);
...
And this didn't work. ItemsSource was null when FormControl() was constructed. So I added a setItemsSource() method to the viewmodel, and called it in the ItemsSource property's set function. This didn't work, either. The xaml is apparently binding to the property, but it seems to do it without calling the property's set function.
So I decided to listen to the ValueChanged event, on the DependencyProperty:
public FormControl()
{
InitializeComponent();
this.DataContext = new FormControlVM();
DependencyPropertyDescriptor prop =
DependencyPropertyDescriptor.FromProperty(FormControl.ItemsSourceProperty, this.GetType());
prop.AddValueChanged(this, delegate
{
FormControlVM formControlVM = (FormControlVM)this.DataContext;
formControlVM.setItemsSource(this.ItemsSource);
});
...
And it's still not working. The ValueChanged delegate never seems to get called.
This seems like it should be a simple thing, but I've not been able to find examples on-line, and I've tried every combination I can conceive of.
Any ideas as to how I should handle this?
============ Additional info on the binding ============
Will was asking for info on the xaml that does the binding.
If I put this in page that contains the user control, binding the user control to the viewmodel of the page:
<local:FormControl x:Name="formControl"
Grid.Column="2"
DataContext="{Binding}"
/>
And then this in the user control, binding the form in the user control to the itemsCollection of the page's viewmodel:
<telerik:RadDataForm
ItemsSource="{Binding itemsCollection}"
Header="View Item:"
CommandButtonsVisibility="None"
AutoGenerateFields="False"
/>
Then everything works fine.
But the problem is that I can't bind the user control to the viewmodel of the page. I need to have the user control's viewmodel expose information that the page's viewmodel should not be seeing.
And I can't have the form in the user control reaching outside of the user control, binding to a property on the page's viewmodel. It's a violation of encapsulation, that will make using the user control on a different page much more complicated, and severely limit how I might modify the internals of the control in the future. (The page should not know anything about the controls within the user control, the controls within the user control should not know anything about the page.)
When I include the user control on a page, I want to bind the user control to a property of the page's viewmodel, and I want any controls within the user control to bind to properties of the user control, or of the user control's viewmodel.
I'd think this was a fairly common occurrence. But I've not been able to find any examples of how it might be done.
To restate the problem: I have a UserControl, that contains an embedded Telerik DataForm control. I need to bind the ItemsSource property of the embedded DataForm to a property of the DataContext of the page on which my UserControl is placed.
If the UserControl did not have its DataContext set, it would inherit the DataContext of the page, and I could easily bind the embedded DataForm's ItemsSource property to a property of it, but the UserControl has it's own DataContext.
If the UserControl was written to be used only on this page, I could bind the embedded DataForm's ItemsSource property to a property of the page, using RelativeSource binding. But this UserControl is intended to be used in a number of places, and cannot have silent dependencies on properties outside of the UserControl. I need to make the dependency explicit.
Creating a DependencyProperty on the UserControl is the right approach, but there's no need to try to replicate the property in the UserControl's viewmodel.
What I need to do is to
1: Add a DependencyProperty to the UserControl:
public QueryableCollectionView ItemsSource
{
get { return (QueryableCollectionView)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
public static readonly DependencyProperty ItemsSourceProperty =
DependencyProperty.Register("ItemsSource", typeof(QueryableCollectionView), typeof(FormControl));
Note: I do not need to implement a call-back function.
2: Bind the embedded DataForm's ItemsProperty to this new DependencyProperty of the UserControl, using RelativeSource binding:
<UserControl
...>
<telerik:RadDataForm
ItemsSource="{Binding Path=ItemsSource, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
/>
</UserControl>
3: Make the viewModel of the page visible, with the proper type (DataContext has type object):
public partial class MainWindow : Window
{
public MainWIndow()
{
this.InitializeComponent();
this.DataContext = new MainWindowVM();
}
public MainWindowVM viewModel
{ get { return this.DataContext as MainWindowVM; } }
}
4: On the page, bind the UserControl's new ItemsProperty DependencyProperty to the appropriate property of the page's viewmodel, again using RelativeSource binding:
<Window
...>
<local:FormControl
ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadPane}},Path=viewModel.items}"
/>
</Window>

How can I access one window's control (richtextbox) from another window in wpf?

I'm sure this is something very simple but I can't figure it out. I've searched here and on msdn and have been unable to find the answer. I need to be able to set the richtextboxes selection via richtextbox.Selection.Select(TextPointer1, Textpointer2).
Application.Current contains a collection of all windows in you application, you can get the other window with a query such as
var window2 = Application.Current.Windows
.Cast<Window>()
.FirstOrDefault(window => window is Window2) as Window2;
and then you can reference the control from your code, as in
var richText = window2.MyRichTextBox
Application.Current.Windows.OfType(Of MainWindow).First
You should be able to access controls on Window1 from Window2 code behind, if that's what you want. Generated fields are internal by default.
All you need is to name the control on Window1, like this:
<RichTextBox x:Name="richtextbox" ... />
In Window2 code behind:
var window = new Window1(); // or use the existing instance of Window1
window.richtextbox.Selection.Select(TextPointer1, Textpointer2);
A better option would be to encapsulate select operation in a method in code behind of Window1, to avoid giving away internal. Then you would have:
// Window1.cs
public void Select(int param1, int param2)
{
richtextbox.Selection.Select(param1, param2);
}
// Window2.cs
var window = new Window1(); // or use the existing instance of Window1
window.Select(TextPointer1, Textpointer2);
You cant access the texbox from another window as it is private to that window you can however work around this by exposing the RichTextBox as a public property on your window (hack)
public RichTextBox RichTextBox {
get{
//the RichTextBox would have a property x:Name="richTextbox" in the xaml
return richTextBox;
}
}

Resources