How to use a custom user control in silverlight - silverlight

I was searching for a 'waiting' animation for silverlight after I realized that GIF animations doesn't work in Silverlight. I found an excellent animation here. How can I use this in my application. Do I need to create any custom controls. I just want to place this over my dataview until the items gets populated.

Check out this implementation in Coproject on codeplex.
If you're using mvvm, you can wrap operations in a using. The BusyWatcher gets injected into the ViewModel using MEF.
[Import(RequiredCreationPolicy = CreationPolicy.Shared)]
public IBusyWatcher Busy { get; set; }
then:
using (Busy.GetTicket())
{
...
}

Create UserControl call it something sensible like WaitAnim1.
The sample you point to overuses Grids. The outer grid represent in your case the UserControl. Do the following to make your usercontrol from that original code:-
copy the xmlns:sys="clr-namespace:System;assembly=mscorlib" namespace to your UserControl element.
copy the whole Grid.Resources to directly under the <UserControl> tag and rename Grid.Resources to UserControl.Resources
copy whole <Grid x:Name="LayoutRoot" > element from the source code and replace the one in your usercontrol with it.
You now have a usercontrol that when displayed will show the animation.

Related

Use properties of the base control that is inside the UserControl

How can I use the properties of the controls that are inside a user control without having to use DependencyProperty?
Since, if for example I want to use all the properties of a button, I would have to declare all these?
And if there is another way without user control and it is the correct one, I would appreciate it if you answered it. (Google translator, sorry)
UserControl:
<UserControl x:Class="UserControls.UserControl01"
...
>
<Grid>
<Button x:Name="uc_btn" />
<TextBox x:Name="uc_txt" />
<DataGrid x:Name="uc_dtg" />
</Grid>
</UserControl>
Code using the UserControl:
<Window x:Class="UserControls.wnd02"
...
>
<Grid>
<local:UserControl01 uc_btn.Background="Red" uc_txt.Margin="10" uc_dtg.BorderThickness="5" Margin="90" />
<local:UserControl01 uc_btn.Background="Green" uc_txt.Margin="25" uc_dtg.BorderThickness="20" Margin="5" />
</Grid>
</Window>
It is not usual to do what you are asking.
Let's consider a usercontrol which is intended to work as if it is one single control. For example a time picker. This contains two sliders which increase/decrease hour and minute. You can also overtype in the hour and minute textboxes and there's a : between the two textboxes.
This usercontrol is all about the one property though. Time. You don't care what the minutes background is externally. If this changes it's internal to the usercontrol.
In this scenario you'd usually add a TimeSpan dependency property to the usercontrol and this is the only thing anything external to it uses.
Pretty much all commercial WPF development uses the MVVM pattern and that TimeSpan would be bound to a property in the parent view's viewmodel.
That's one scenario.
Another is where a usercontrol encapsulates a bunch of UI which is then re-usable.
Styling has scope so when you apply a style to say a Button in a window then that would apply to any Buttons in a usercontrol within it. Setting their properties.
There are also certain dependency properties marked as "inherits" whose values propogate down the visual tree.
One such is DataContext and it is this which most teams would use to deal with properties within a usercontrol.
Using MVVM there would be a MainWindowViewModel.
That would have (say ) a ChildUserControlViewModel property. That would be associated with usercontrol using a datatemplate specified datatype.
You'd then bind properties of whatever is in a usercontrol to properties of ChildUserControlViewModel or properties of MainWindowViewModel using RelativeSource binding.
ViewModel first is a common navigation and composition pattern for WPF. You should be able to find numerous blogs explain it better than I can in a SO post.
Here's one:
https://social.technet.microsoft.com/wiki/contents/articles/30898.simple-navigation-technique-in-wpf-using-mvvm.aspx

User Control inherit from ListBox in Wpf?

I want to make a user Control in WPf with same properties and events like ListBox.(can add items , remove them , selecting ,...)
on way in windows App is use a user control which is inherit form ListBox. but in WPF I don't know how make User Control inherit from ListBox (or other WPF Control)!!!
I write this code but it had an exception
public partial class InboxListItem : ListBox
{
public InboxListItem()
{
InitializeComponent();
}
and It's Xaml file
<UserControl
x:Class="ListBoxControl.InboxListItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myTypes="clr-namespace:ListBoxControl"
/>
you cant make a UserControl inherit from ListBox. What you want is a CusomControl, and the xaml will traditionally live in Themes\Generic.xaml Keep in mind that you have to register the default style. Of course, you can just use the one provided by ListBox, if you want.
You should check this article, it provides some good information as well as links to more articles.

User defined top level control in XAML

A normal UserControl looks like this in XAML:
<UserControl x:Class="mynamespace.foo" ...namespaces...>
<!-- content -->
</UserControl>
I'd like to be able to define my own top level object, along the lines of:
<MyControl x:Class="mynamespace.mycontrol" ...namespaces...>
<!-- content -->
</UserControl>
Where MyControl derives from a UserControl itself.
Of course the compiler complains about "MyControl" not being found. Is there a way around this?
The root tag is the base class. That's why the root of the default Window1 is Window. Using the menu option Add > UserContol... is in fact creating a sub-class for UserContol.
If you have some common elements and want a control base class you can use the base class as the root tag. You can't derive your class from any class that has a xaml defined visual tree, but your base class can derive from UserConrtol.
First define your base class:
public class MyControlBase : UserControl
{
// ...
}
Then create your specific child class:
(You can start with the automatically created UserControl1 and change it from there)
public partial class MyControl1 : MyControlBase
{
public MyControl1()
{
InitializeComponent();
}
}
Then change the Xaml side to look like this:
<MyNamespace:MyControlBase
x:Class="MyNamespace.MyControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:MyNamespace="clr-namespace:MyNamespace">
This is a great way to make custom controls derived from built in ones other that UserControl. It is typically recommended to just use basic UserConrtols if you can and make a custom control only if you have to.
good luck,
Define your namespace in the XAML and then use your control name as the tag:
<Window ...
xmlns:my="..." />
<my:mycontrol ... />
</Window>
No. The XAML is declaring what a MyControl visually is, just as the code-behind is defining what a MyControl behaviourally is. Defining the visuals of a MyControl in terms of a MyControl wouldn't really make sense: it's the equivalent of, in the code-behind, deriving MyControl from MyControl, which you obviously wouldn't do.
In addition, WPF doesn't let you derive one UserControl class from another e.g. if BobsControl is a UserControl then you can't write <local:BobsControl x:Class="MyNamespace.MyControl... /> either. I believe this is because UserControls have a visual appearance (content) baked into their XAML and the content of the derived class would have to replace the content of the base class, so the visual inheritance is generally not useful.
However, you can do it if the top-level element you're deriving from is a custom control. Custom controls are lookless (not defined in XAML). So you can create your own top-level element as a custom control, and then derive "user" controls from that. (If you do go down this route, you'll probably want to derive your custom control from ContentControl or apply ContentPropertyAttribute, so that your top-level element can easily contain other XAML.)

Using MEF to import a WPF DataTemplate?

I was looking at MEF as an extensibility framework, and I'm pretty much sold, except for one point:
Let's say I want to import both a ViewModel and a View to display it. I think the "right" way to do that is for the MEF part to export a ViewModel class, and a DataTemplate that displays the ViewModel. As an example, say you were building a Visio-like application and you want to import a library of shapes. Each shape needs a View defined in Xaml and a ViewModel that would wrap some underlying Model object.
Is this possible? What would the Import contract look like for the DataTemplate and how do I make WPF aware of the imported DataTemplate?
Yes, I was able to make this work in the following way:
In my host WPF application, I added this Import:
[ImportMany("ApplicationResources", typeof(ResourceDictionary))]
public IEnumerable<ResourceDictionary> Views { get; set; }
Then in my composite part, I declared a ViewModel, and a data template for the ViewModel in a regular ResourceDictionary Xaml file. Then I created a code behind for the ResourceDictionary, like this (in this example, the ViewModel is called ItemViewModel and the ResourceDictionary is called ItemView):
[Export("ApplicationResources", typeof(ResourceDictionary))]
public partial class ItemView : ResourceDictionary
{
public ItemView()
{
InitializeComponent();
}
}
For reference, the Xaml for the example ResourceDictionary looks like this:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyCompany.MyProduct"
x:Class="MyCompany.MyProduct.ItemView">
<DataTemplate DataType="{x:Type local:ItemViewModel}">
...
</DataTemplate>
</ResourceDictionary>
Then, back in my host WPF application, after I successfully compose and before I show the main window, I do this:
// Add the imported resource dictionaries
// to the application resources
foreach (ResourceDictionary r in Views)
{
this.Resources.MergedDictionaries.Add(r);
}
That seems to successfully apply the DataTemplate anywhere WPF sees an ItemViewModel.
EDIT: For anyone who's interested, I released an application framework called SoapBox Core as open source, and it uses this method extensively to import Views into the application resources. It works very well, and you can download the source yourself and take a look at how it works.

Is it possible to set code behind a resource dictionary in WPF for event handling?

Is it possible to set code behind a resource dictionary in WPF. For example in a usercontrol for a button you declare it in XAML. The event handling code for the button click is done in the code file behind the control. If I was to create a data template with a button how can I write the event handler code for it's button click within the resource dictionary.
I think what you're asking is you want a code-behind file for a ResourceDictionary. You can totally do this! In fact, you do it the same way as for a Window:
Say you have a ResourceDictionary called MyResourceDictionary. In your MyResourceDictionary.xaml file, put the x:Class attribute in the root element, like so:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MyCompany.MyProject.MyResourceDictionary"
x:ClassModifier="public">
Then, create a code behind file called MyResourceDictionary.xaml.cs with the following declaration:
namespace MyCompany.MyProject
{
partial class MyResourceDictionary : ResourceDictionary
{
public MyResourceDictionary()
{
InitializeComponent();
}
... // event handlers ahead..
}
}
And you're done. You can put whatever you wish in the code behind: methods, properties and event handlers.
== Update for Windows 10 apps ==
And just in case you are playing with UWP there is one more thing to be aware of:
<Application x:Class="SampleProject.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:rd="using:MyCompany.MyProject">
<!-- no need in x:ClassModifier="public" in the header above -->
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- This will NOT work -->
<!-- <ResourceDictionary Source="/MyResourceDictionary.xaml" />-->
<!-- Create instance of your custom dictionary instead of the above source reference -->
<rd:MyResourceDictionary />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
I disagree with "ageektrapped"... using the method of a partial class is not a good practice. What would be the purpose of separating the Dictionary from the page then?
From a code-behind, you can access a x:Name element by using:
Button myButton = this.GetTemplateChild("ButtonName") as Button;
if(myButton != null){
...
}
You can do this in the OnApplyTemplate method if you want to hookup to controls when your custom control loads. OnApplyTemplate needs to be overridden to do this. This is a common practice and allows your style to stay disconnected from the control. (The style should not depend on the control, but the control should depend on having a style).
Gishu - whilst this might seem to be a "generally not to be encouraged practice" Here is one reason you might want to do it:
The standard behaviour for text boxes when they get focus is for the caret to be placed at the same position that it was when the control lost focus. If you would prefer throughout your application that when the user tabs to any textbox that the whole content of the textbox was highlighted then adding a simple handler in the resource dictionary would do the trick.
Any other reason where you want the default user interaction behaviour to be different from the out of the box behaviour seems like good candidates for a code behind in a resource dictionary.
Totally agree that anything which is application functionality specific ought not be in a code behind of a resource dictionary.
Adding on....these days, with the advent of {x:Bind ...}, if you want to put your DataTemplate into a shared ResourceDictionary file, you are required to give that file a code behind.
XAML is for constructing object graphs not containing code.
A Data template is used to indicate how a custom user-object is to be rendered on screen... (e.g. if it is a listbox item) behavior is not part of a data template's area of expertise. Redraw the solution...

Resources