wpf - vb - animating gridsplitter / dock panel - wpf

this relates to my earlier question - I want to animate a grid splitter (to make panels slide into / out of view). We are pretty good at VB and already have a VB project, so would like to stay with VB if we can, but most WPF examples seem to be in XAML or CS.
I have some simple VB animation code working, BUT:
Of course, what needs to be animated is the width / height of the grid column / row, and this is not a dependency property. I found some clever stuff in CS to make a dependency property but could not translate this to vb. So I found a simple workaround which is to animate a dockpanel in the grid cell, catch it's size changed events and use these to set the cell grid size. It works but I wonder if it's less efficient as 2 things are being changed separately? Also I have to (when the animation completes) set the grid cells sizes back to * in the right proportion, and the dockpanel size back to auto.
It works, but it seems a bit clumsy - does someone have an example of making the animation for the grid work directly from VB any any other suggestions?
Thanks

For reference, here is the VB code for a dependency property to animate a gridsplitter:
Public Class GridLengthAnimation
Inherits AnimationTimeline
Public Sub New()
End Sub
Public Property From() As GridLength
Get
Return DirectCast(GetValue(FromProperty), GridLength)
End Get
Set(value As GridLength)
SetValue(FromProperty, value)
End Set
End Property
Public Shared ReadOnly FromProperty As DependencyProperty
= DependencyProperty.Register("From", GetType(GridLength),
GetType(GridLengthAnimation))
Public Property [To]() As GridLength
Get
Return DirectCast(GetValue(ToProperty), GridLength)
End Get
Set(value As GridLength)
SetValue(ToProperty, value)
End Set
End Property
Public Shared ReadOnly ToProperty As DependencyProperty
= DependencyProperty.Register("To", GetType(GridLength),
GetType(GridLengthAnimation))
Public Overrides ReadOnly Property TargetPropertyType() As Type
Get
Return GetType(GridLength)
End Get
End Property
Protected Overrides Function CreateInstanceCore() As Freezable
Return New GridLengthAnimation()
End Function
Public Overrides Function GetCurrentValue
(defaultOriginValue As Object,
defaultDestinationValue As Object,
animationClock As AnimationClock) As Object
Dim fromValue As Double = Me.From.Value
Dim toValue As Double = Me.[To].Value
If fromValue > toValue Then
Return New GridLength((1 - animationClock.CurrentProgress.Value)
* (fromValue - toValue) + toValue,
If(Me.[To].IsStar, GridUnitType.Star, GridUnitType.Pixel))
Else
Return New GridLength((animationClock.CurrentProgress.Value) *
(toValue - fromValue) + fromValue,
If(Me.[To].IsStar, GridUnitType.Star, GridUnitType.Pixel))
End If
End Function
End Class

Related

WPF Dependency Property - set from XAML

I am trying to achieve the following in a WPF personal finance app:
In various places I want to display a user control giving details of a asset holding (usually a share, bond etc), the target asset may be changed dynamically by the user in which case the control must be refreshed. Each Asset has a unique identifier, AssetId.
I am using MVVM and I've developed a single window with a View Model that takes AssetID as a parameter (property) and retrieves the relevant details for binding to the View. This work fine. What I'd like to do is make a generic user control with the same functionality so I can basically drop that 'window' inside other windows.
So I pretty much copy-pasted the XAML from that form into a User Control, where I'm struggling is passing in the AssetId from the parent window to the child control.
Google tells me I need a dependency property and here's where I am
Public Class HoldingView
Private _AssetId As Integer
Public AssetIdProperty As DependencyProperty = DependencyProperty.Register("AssetId",
GetType(Integer),
GetType(HoldingView),
New FrameworkPropertyMetadata(New PropertyChangedCallback(AddressOf AssetIDChanged)))
Public Property AssetId As Integer
Get
Return GetValue(AssetIdProperty)
End Get
Set(value As Integer)
SetValue(AssetIdProperty, value)
End Set
End Property
Private Sub AssetIDChanged(d As DependencyObject, e As DependencyPropertyChangedEventArgs)
Dim NewAssetId As Integer
NewAssetId = e.NewValue
Me.DataContext.AssetId = NewAssetId
End Sub
Public Sub New()
' This call is required by the designer.
InitializeComponent()
Me.DataContext = New HoldingViewmodel
End Sub
End Class
Called like this:
<Grid>
<local:HoldingView AssetId="{Binding AssetId}"/>
</Grid>
The code compiles and runs but when I try and load the window that has the user control, the app crashes with this message:
A 'Binding' cannot be set on the 'AssetId' property of type 'HoldingView'. A 'Binding' can only be set on a DependencyProperty of a DependencyObject.
Which is not that helpful. From my Googling, you can also get this message if the syntax of the DP registration is not spot on, but it looks Ok to my inexperienced eye...
Anybody else had this?
Public AssetIdProperty As DependencyProperty
should be
Public Shared ReadOnly AssetIdProperty As DependencyProperty
Please take a look at Custom Dependency Properties.
Also remove
Me.DataContext = New HoldingViewmodel
because that will effectively break any DataContext-based Bindings like
AssetId="{Binding AssetId}"
where the source property is supposed to be owned by the object in the inherited DataContext, which usually is an object in the application's view model.
Controls should never have their own, "private" view model, but instead handle property changes in code behind. In case of UserControls, there could simply be UI elements in their XAML that would be bound to the UserConrol's own properties.
Hence
Me.DataContext.AssetId = NewAssetId
in the PropertyChangedCallback is pointless and should be removed, as well as
Private _AssetId As Integer
To summarize, it should look like this:
Public Class HoldingView
Public Shared ReadOnly AssetIdProperty As DependencyProperty =
DependencyProperty.Register(
"AssetId",
GetType(Integer),
GetType(HoldingView),
New FrameworkPropertyMetadata(
New PropertyChangedCallback(AddressOf AssetIdPropertyChanged)))
Public Property AssetId As Integer
Get
Return GetValue(AssetIdProperty)
End Get
Set(value As Integer)
SetValue(AssetIdProperty, value)
End Set
End Property
Private Shared Sub AssetIdPropertyChanged(
d As DependencyObject, e As DependencyPropertyChangedEventArgs)
CType(d, HoldingView).AssetIdChanged(e.NewValue)
End Sub
Private Sub AssetIdChanged(id As Integer)
...
End Sub
Public Sub New()
InitializeComponent()
End Sub
End Class

WPF: Design time support for dependency properties with default values

I have written a custom control based on a ListBox. It contains a default ItemTemplate which shows an image given to the ListBox by a custom dependency property. The control also contains a default image, which is used when the user doesn't give an image to the dependency property.
This works so far, but now I've found a little problem and I don't know how to fix that.
When I use my custom control in the XAML designer, it first shows the default image. When I set the image's dependency property to an other image, the new image is immediately shown in the XAML designer.
But when I remove the XAML attribute for the new image again, the XAML designer only shows a white rectangle instead of the default image.
I assume it's because with setting the image's dependency property to some value and then removing it I nulled the value. But even when I check for null in the CoerceCallback and give back the default image when the coerced value is null, doesn't work.
What's the best way to support fallback values for dependency properties?
TestControl.vb
Public Class TestControl
Inherits ListBox
Private Shared _defaultResources As ResourceDictionary
Shared Sub New()
_defaultResources = New ResourceDictionary
_defaultResources.Source = New Uri("...")
End Sub
Public Shared ReadOnly TestProperty As DependencyProperty = DependencyProperty.Register(NameOf(TestControl.Test),
GetType(ImageSource),
GetType(TestControl),
New FrameworkPropertyMetadata(Nothing,
AddressOf TestControl.OnTestChanged,
AddressOf TestControl.OnTestCoerce))
Public Property Test As ImageSource
Get
Return DirectCast(MyBase.GetValue(TestControl.TestProperty), ImageSource)
End Get
Set(value As ImageSource)
MyBase.SetValue(TestControl.TestProperty, value)
End Set
End Property
Private Shared Sub OnTestChanged(d As DependencyObject, e As DependencyPropertyChangedEventArgs)
End Sub
Private Shared Function OnTestCoerce(d As DependencyObject, value As Object) As Object
If (value Is Nothing) Then
Return TryCast(_defaultResources.Item("TestImage"), ImageSource)
End If
Return value
End Function
Public Sub New()
Me.Test = TryCast(_defaultResources.Item("TestImage"), ImageSource)
End Sub
End Class
When I use that control like this
<local:TestControl ItemsSource="{Binding Items}" />
every item shows the default image at design time. When I change the XAML to
<local:TestControl ItemsSource="{Binding Items}"
Test="{StaticResource NewImage}" />
every item shows the new item at design time. But when I remove the Test="{StaticResource NewImage}" again, it doesn't go back to the default image.
Ok, after some testing (using this technique) I have discovered the source of your issue.
First of all, you are not using PropertyMetadata to set your default value, but instead the constructor. I assume you have a good reason to do so, but this essentially means that now you are relying on the coercion callback to set the default value.
However, it is not called (the framework assumes that your "true" default value - Nothing - doesn't need to be validated) after you remove the
Test="{StaticResource TestString}" line. Only the OnTestChanged
is called. This means we can use it to restore the default value:
void OnTestChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (e.NewValue is null)
{
((TestControl)d).Test = yourDefaultImage;
return;
}
//Actual "OnChanged" code
}
A clumsy solution indeed, but it works. Depending on your exact situation, you might also want to take a look at Binding's FallbackValue and TargetNullValue properties:
Test="{Binding Source={ }, FallbackValue={ }, TargetNullValue={ }}"

Converting normal property to dependency property

I have a control that I am using for my new application. This control has a regular property as such.
Public Property Value() As String
Get
If AutoCompleteTextBox.SearchText Is Nothing Then
Return String.Empty
Else
Return AutoCompleteTextBox.SearchText.ToString.Trim
End If
End Get
Set(value As String)
AutoCompleteTextBox.SearchText = value
End Set
End Property
Edit:
So, after multiple tries, I am finally at this stage.
Public Shared ValueProperty As DependencyProperty = DependencyProperty.Register("Value", GetType(String), GetType(AutoCompleteBox))
Public Property Value() As String
Get
Return Me.GetValue(ValueProperty).ToString
End Get
Set(value As String)
Me.SetValue(ValueProperty, value)
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler _
Implements INotifyPropertyChanged.PropertyChanged
This is the dependency property. This property is still not binding. No errors are shown in output window for binding.
Text="{Binding RelativeSource={RelativeSource Self}, Path=Value, Mode=TwoWay}"
This is my binding method. I have no idea what else I can do. At least if there was an error, I could have figured out something. Without any error, I am just a headless chicken here.
Please refer to the following url for all the dependency fundamentals
http://www.wpftutorial.net/dependencyproperties.html
Basically, you can get a property changed event of dependency property by providing a FrameworkPropertyMetadata.
new FrameworkPropertyMetadata( [Default Value],
OnCurrentTimePropertyChanged);
And you can get back the target control (DependencyObject) at the event handler and implement your logic over there
private static void OnCurrentTimePropertyChanged(DependencyObject source,
DependencyPropertyChangedEventArgs e)
{
AutoCompleteTextBox control = source as AutoCompleteTextBox;
string time = (string)e.NewValue;
// Put some update logic here...
}
Declaring a dependency property in a control is a good thing.
You could make some binding in the xaml (sorry I don't have your XAML - I imagine).
Something like :
<TextBox x:Name="AutoCompleteTextBox"
Text="{Binding RelativeSource={RelativeSource=Self},Path=Value}"/>
Regards
TextBox has a property called Text. When you access Text property it will give you text entered in TextBox. Same is your case. Now why you want to convert it into a DP ? A DP would be useful if you want o bind this DP to some other control.
Extend this control itself. Make a new control and introduce this new DP.
While a DP is used where you want to bind this property to some control. This property then gets updated from control or control gets updated from this DP depending upon binding mode set.
How to do binding :
<TextBox x:Name="UserInput" />
<uc:MyAutoCompleteTextBox ValueDP="{Binding Text, ElementName=UserInput, Mode=OneWay}" />
MyAutoCompleteTextBox is new control which extends(inherits) from your old AutoComplete control.
If you want to apply some filtering logic or anything else, you can apply it in your DP itself like this :
Get
someVariable = TryCast(Me.GetValue(ValueProperty), String)
' apply somg logic to someVariable
' use your old Value property from here
Return someVariable
End Get
There are many WPF Binding tutorials on net.
I recommend :
http://blog.scottlogic.com/2012/04/05/everything-you-wanted-to-know-about-databinding-in-wpf-silverlight-and-wp7-part-one.html
Just change your code with following code and you should be good
your code
Public Shared ReadOnly ValueProperty As DependencyProperty = DependencyProperty.Register("Value", GetType(String), GetType(AutoCompleteBox))
Public Property Value() As String
Get
Return TryCast(Me.GetValue(ValueProperty), String)
End Get
Set(value As String)
Me.SetValue(ValueProperty, value)
End Set
End Property
New code
Public Shared ReadOnly ValueProperty As DependencyProperty = DependencyProperty.Register("Value", GetType(String), GetType(AutoCompleteBox))
Public Property Value() As String
Get
If AutoCompleteTextBox.SearchText Is Nothing Then
Return String.Empty
Else
Return AutoCompleteTextBox.SearchText.ToString.Trim
End If
End Get
Set(value As String)
AutoCompleteTextBox.SearchText = value
End Set
End Property
This DP will do what your Older property was doing. But just think about your requirement there can be a better way of writing the things.
Thanks

How to make the command property of a wpf button a dependency property of a user control

I am trying to teach myself the basics of creating user controls in wpf. To that end I have been experimenting with building a data navigation control to allow navigation through the records being retrieved by various view models. My long term plan is for a completely self contained custom control, but I'd like to master the smaller points first so to that end I'd like to know how I can make the Command, and Command Parameter properties ( as well as the Is Enabled property) of buttons that form part of my user control dependency properties of the user control itself.
I have succeeded to make the various image and image height and width properties of the various buttons dependency properties of the overall user control but thus far have not had any success with the Command, Command Parameter and is Enabled properties.
I'd welcome any suggestions anyone could proffer.
I have the following already (I set for each button in my user control):
#Region "Next Button"
Public Property ImageNext() As ImageSource
Get
Return DirectCast(GetValue(ImageNextProperty), ImageSource)
End Get
Set(value As ImageSource)
SetValue(ImageNextProperty, value)
End Set
End Property
Public Shared ReadOnly ImageNextProperty As DependencyProperty = DependencyProperty.Register("ImageNext", GetType(ImageSource), GetType(DataNavigator), New UIPropertyMetadata(Nothing))
Public Property ImageNextWidth() As Double
Get
Return CDbl(GetValue(ImageNextWidthProperty))
End Get
Set(value As Double)
SetValue(ImageNextWidthProperty, value)
End Set
End Property
Public Shared ReadOnly ImageNextWidthProperty As DependencyProperty = DependencyProperty.Register("ImageNextWidth", GetType(Double), GetType(DataNavigator), New UIPropertyMetadata(16.0))
Public Property ImageNextHeight() As Double
Get
Return CDbl(GetValue(ImageNextHeightProperty))
End Get
Set(value As Double)
SetValue(ImageNextHeightProperty, value)
End Set
End Property
Public Shared ReadOnly ImageNextHeightProperty As DependencyProperty = DependencyProperty.Register("ImageNextHeight", GetType(Double), GetType(DataNavigator), New UIPropertyMetadata(16.0))
This however has been adding properties to standard wpf buttons, now what I want to do is access properties of those buttons that already exist and bind to them (via my user control) from my viewmodels
It is the same as any other dependency property.
You declare the DP like this:
Public Shared ReadOnly ThisCommandProperty As DependencyProperty = _
DependencyProperty.Register("ThisCommand", GetType(ICommand), _
GetType(thiscontrol), Nothing)
Public Property ThisCommand As ICommand
Get
Return CType(GetValue(ThisCommandProperty), ICommand)
End Get
Set(ByVal value As ICommand)
SetValue(ThisCommandProperty, value)
End Set
End Property
and in the XAML of your user control:
<UserControl ...>
<Button Command={Binding ThisCommand} ... />
</UserControl>
You set the parameter in the same way, but with type object, and you have to cast it so the correct type in your command handler.
When you use the UserControl, it is like this:
<local:thisControl ThisCommand={Binding whateverCommandYouWantToBindTo},
ThisCommandParameter={Binding whateverParameterYouWant)>
It is really just the same as any other DP, except for the type. Of course, whateverCommandYouWantToBindTo has to be set up as an ICommand too.
People might also tell you that defining usercontrols is bad and to use templates instead, and it's probably a better approach in most cases. But if you want to learn about DPs, I say learn.
Here is an example that I have working in front of me:
Public Shared ReadOnly EditButtonCommandProperty As DependencyProperty = _
DependencyProperty.Register("EditButtonCommand", _
GetType(ICommand), GetType(PersonListControl), Nothing)
Public Property EditButtonCommand As ICommand
Get
Return CType(GetValue(EditButtonCommandProperty), ICommand)
End Get
Set(ByVal value As ICommand)
SetValue(EditButtonCommandProperty, value)
End Set
End Property
Public Shared ReadOnly EditButtonCommandParameterProperty As DependencyProperty = _
DependencyProperty.Register("EditButtonCommandParameter", GetType(Object), _
GetType(PersonListControl), Nothing);
Public Property EditButtonCommandParameter As Object
Get
Return CType(GetValue(EditButtonCommandParameterProperty), Object)
End Get
Set(ByVal value As Object)
SetValue(EditButtonCommandParameterProperty, value)
End Set
End Property
And in the UserControl XAML:
<StackPanel>
<ListBox ... />
<Button
...
Command="{Binding EditButtonCommand}"
CommandParameter="{Binding EditButtonCommandParameter}"/>
</StackPanel>
And I use this UserControl like this:
<local:PersonListControl
...
EditButtonCommand="{Binding PersonListEditCommand}"
EditButtonCommandParameter="{Binding Parents}"/>

How to bind Tooltip in code behind?

I have a class (which will serve as a base class for my user controls) that I want to be able to set the binding of the tooltip through the code behind. I can't seem to figure out quite how to make it work right. I want to set the binding to a property called "ToolTipText" by calling a function "SetToolTip" from the constructor.
Here is what I have so far:
Public MyBaseClass
Inherits UserControl
Private _ToolTipText As String = "This is the default text!!"
Public Property ToolTipText As String
Get
Return _ToolTipText
End Get
Set(value As String)
_ToolTipText = value
End Set
End Property
Private Sub SetToolTip()
Me.ToolTip = New ToolTip With {.MinHeight = 30, .MinWidth = 150, .FontSize = 16, .Foreground = Brushes.White}
Dim ToolTipBinding As Binding = New Binding
ToolTipBinding.Source = Me
ToolTipBinding.Path = New PropertyPath("ToolTipText")
ToolTipBinding.Mode = BindingMode.OneWay
ToolTipBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
BindingOperations.SetBinding(Me.ToolTip, ToolTipService.ToolTipProperty, ToolTipBinding)
End Sub
Public Sub New()
SetToolTip()
End Sub
End Class
However when I mouseover, I only get an empty tooltip (no text). I use snoop (if anyone else is familiar with that tool), and it doesn't list any bindings for my class' tooltip property. But the weird part is that if I delve into the tooltip property, I shows that the tooltip has it's own tooltip property which is set to the correct text. It seems I somehow need to bind to the tooltip's content and not it's own tooltip property.
So I just figured it out. The line which sets the binding should read:
BindingOperations.SetBinding(Me.ToolTip, ContentControl.ContentProperty, ToolTipBinding)
I's kind of strange to think, but before I was setting the tooltip's tooltip.

Resources