Debugging resource value problems in XAML and vb? - wpf

Question

I have what seems like a straightforward problem: make an application which can handle any resolution display.
Background:
This is a display-only application (no user interface). It is for display of information, and I've made a test app to work out an issue. Have spent a few days trying to find a solution to this one tiny problem. Either need a clever programming solution (which has thus far eluded me) or a different way of approaching the problem (again, has been elusive).
This is a WPF application with VB.net code behind. The composition of the one and only window needs to maintain the same relative layout to the display components, and the application is intended to run full-screen (this demo runs in a window, so I can resize it easily and test different "screen layouts").
All but one part of the layout works fine.
The part with the problem is a "bar" which is intended to animate up or down, depending on circumstances. The size of the bar already changes appropriately, depending on the size of the application window. However... the distance the bar travels is dependent on the size of that bar; the shorter it is, the fewer pixels it has to travel, and conversely, a higher resolution screen necessitates it travel further. Animation is accomplished by changing the height of a grid object which contains both a rectangle (the bar) and a viewport which in turn has a textblock object.
I've created a resource value in XAML with a value which represents the default height of the grid object which contains the bar. If that resource is bound to the value of the keyframe as a static resource, the value is passed to storyboard and the animation happens. However, I have not been able to change the value in this configuration. When the size of the window changes, VB code attempts to change the resource key value, but no joy. Have also tried this with the binding done as a dynamic resource.
Lots of reading shows that some bindings into XAML work, while others (such as keyframes) aren't so lucky; something about "being freezable," which seems silly, as this shouldn't be that hard. Other things I've read suggest that the "fix" is to implement solution in the code behind. Most don't provide any other info on how that might be done, and the few other items suggestion methods which seem absurdly circuitous.
Here is the XAML, with some inline comments to point out what's going on:
<Window x:Name="SmartClock" x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication3"
xmlns:System="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="800">
<Window.Resources>
<!-- Set a variable (resource) to be used as the height value in animation -->
<System:Double x:Key="OnAirBarUp">84</System:Double>
<!-- Simple keyframe animation, which slides a bar with text into view -->
<Storyboard x:Key="story_OnAirUp" x:Name="OnAirUp">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid_OnAir">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<!-- ****** HERE'S WHERE THE "FUN" BEGINS :/
This line needs to have a target value which changes, depending on the
height of objects in the window, and those are affected by the size
of the window. The intention is to make this a full-screen app, but
can be used on many different monitors, so the resolution is not known
at design time.
The resource I set earlier in the XAML ("84") will be used for this
keyframe value, and the animation works... but is only "correct" for
the default window size.
(yes, I know that the bar starts in the "up" position currently, but that
is just to help me see it as I debug this... when the button is pushed,
the bar should instantly disappear, and then slide back on to the screen
to the same position).
*************************************************************************** -->
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="{StaticResource ResourceKey=OnAirBarUp}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<!-- Animation is triggered by clicking the button -->
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button1">
<BeginStoryboard Storyboard="{StaticResource story_OnAirUp}"/>
</EventTrigger>
</Window.Triggers>
<!-- Here we setup the page -->
<Grid x:Name="grid_Page" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="4*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<!-- This is "status" grid at the top of the page -->
<Grid x:Name="grid_Top" Grid.Row="0" d:LayoutOverrides="LeftMargin, RightMargin, TopMargin, BottomMargin" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Name="row_ProgramName" Height="1*"/>
<RowDefinition Name="row_Status" Height="1*"/>
</Grid.RowDefinitions>
<Viewbox x:Name="viewbox_ProgramName" Grid.Row=" 0" Margin="0" Stretch="Uniform">
<TextBlock x:Name="textblock_ProgramName" Text="Some text on top" Background="#FFFFFF12"/>
</Viewbox>
<!-- This creates a grid which will hold the "ON AIR" bar -->
<Grid x:Name="grid_OnAir" Grid.Row="1" VerticalAlignment="Bottom" ShowGridLines="True" Height="84" >
<Rectangle x:Name="rectangle_OnAir" Fill="#FF90A436" RadiusX="20" RadiusY="20" Margin="10,0" Height="83"/>
<Viewbox x:Name="viewbox_OnAir" Grid.Row="1" Margin="0" Stretch="Uniform">
<TextBlock x:Name="textblock_OnAir" Text="ON AIR" FontSize="64" VerticalAlignment="Top" FontWeight="Bold" Background="#FFDC0000" Margin="0" HorizontalAlignment="Center" />
</Viewbox>
</Grid>
</Grid>
<!-- This is a big ugly button for triggering the storyboard -->
<Button x:Name="button1" Content="Button" Margin="0" Grid.Row="1" FontSize="26.667" HorizontalAlignment="Left" Width="257"/>
</Grid>
</Window>
And here is the VB.net code which also has copious comments:
Class MainWindow
Private Sub MainWindow_SizeChanged(sender As Object, e As SizeChangedEventArgs) Handles Me.SizeChanged
' Set the size of items on the screen based on the size of the window.
' "rectangle_OnAir" is the rectangle (the "On-Air" bar for the display)
' "viewbox_OnAir" allows the textblock to properly scale.
' "grid_OnAir" is the container which will be made taller and shorter
' through animating the "height" property. This allows the contents
' to slide up and down in their region of the screen.
' Since the window can be any size, we adjust the height of the
' controls to accomodate.
rectangle_OnAir.Height = grid_Top.ActualHeight / 2
viewbox_OnAir.Height = grid_Top.ActualHeight / 2
grid_OnAir.Height = grid_Top.ActualHeight / 2
' Set the height of the dynamic resource "OnAirBarUp" to a value
' which equals the height of "rectangle_OnAir".
' This will be used in the animation to allow the whole rectangle to
' be displayed.
Resources("OnAirBarUp") = grid_Top.ActualHeight / 2
End Sub
End Class
This is one version of many permutations.
When the code runs without re-sizing the window, this is what it looks like:
This is the default layout of this test page... the "On Air" bar is visible, and pressing the "button" causes it to disappear for a moment, and then immediately animate upwards into the current position
With the window small, the animation causes the bar to overshoot the location where it need to be (the grid height value is too large for this size window
Making the window larger than default has the opposite effect on the animation; the bar undershoots the landing location.
I've contemplated wrapping the whole display in a viewbox control, so the whole mess can scale to fit whatever display, and tried some of this, with less-than-stellar results. It was overly complicated, and there are distortions in the graphics and text.
From what troubleshooting I could do, it seems that the resource value does change, but not the value at the binding point; I'm pretty much stuck with whatever value was used at the moment the application was launched.
It seems odd to provide a framework for dynamically-configurable layout, and for extensive animation capabilities, and then have it hamstrung by those two aspects not being able to "play nice" together because a simple double value can't be passed from the code to the layout markup.
Please excuse the length of the post; I'm trying to be thorough, and trying to anticipate what someone might write in response. Also please excuse the hideous colors of the sample -- what was an aid to me during the layout of this test, not intended for the final application.
Ideally, the best solution would allow for any size display, without the program having any foreknowledge of that resolution. Also, being able to resize during program execution would be nice, in case the program can be used (after all) in a less-than-full-screen arrangement. In that case, it would need to be able to gracefully handle most reasonable window sizes (I'd have to code in some lower boundary limits to the window size).
Whatever solution I use, it would need to be able to handle other similar animation needs (other parts need to move on and off the screen, moving the correct amount for the given circumstances).

Answer 1

I had posted this last night on both Stack Overflow and on Microsoft's MSDN forums, and got a good reply on MSDN. That pointed me in the right direction, and I posted a follow-up message with a detailed description of what worked for me. Here is that follow-up report:
Andy,
Thanks for the quick and detailed reply!
I'll start with this part: It now works.
It did take me a couple more hours of groping (using your clues) to get there. I started this reply at that time (about four hours ago), but persistence paid off.
-------------
You say: "I get that you're animating the bar but not what it's relative to and where it's coming or going to."
I'm guessing you mean literally, as in where on the screen, as opposed to conceptually (as in purpose).
The literal "where" is to have the bar rise out of the middle third (approximately) region of the screen (divided horizontally). The whole application is a clock with some value-added features for use in a newsroom. I already have a working clock based generally on this design, but the "On Air" bar isn't implemented yet. This will be triggered by an event over a network socket connection, quite literally when the studio is "on air." When that happens, the text in the upper third of the screen is shrunk gracefully as the "on air" bar rises up, essentially halfway into the top third region.
The animation works properly if I don't resize the window. Since I don't know what size monitors will be used in the different implementations of this, and since this will end up being at some of our other facilities which do the same thing, I need to build it at this stage so it is flexible enough to handle a 1024x768 screen or a 1920x1080, or something in-between, or 4K, or whatever.
I could make the bar a fixed size, but that would go against the balance of the layout (aesthetic concern) and the readability of right-sized text (usability concern).
There are to be other status fields which will be able to move into view, depending on circumstances (other things happening in real time, triggered by events over the computer network), which will need to have similar flexibility of the positioning of the animations.
Looking over the marquee code you pointed out to me, it seems that binding is done to an object, but I'm unsure how that method could change the distance that a keyframe could move the object, just adjust the properties of the object being moved.
-------------
I looked over the "marquee" code, though it took some patience to dissect it. The C# isn't too bad, but I'm not fluent, so I turned to an online code converter to translate it to VB:
Public Partial Class MainWindow
Inherits Window
Public Sub New()
InitializeComponent()
End Sub
Private SBMarquee As Storyboard
Private XAnimation As DoubleAnimation
Private Sub Window_ContentRendered(sender As Object, e As EventArgs)
SBMarquee = TryCast(Me.Resources("SBmarquee"), Storyboard)
XAnimation = TryCast(SBMarquee.Children(0), DoubleAnimation)
XAnimation.[To] = MarqueeContainer.ActualWidth * -1
AddHandler Me.SizeChanged, AddressOf Window_SizeChanged
End Sub
Private Sub Window_SizeChanged(sender As Object, e As SizeChangedEventArgs)
XAnimation.[To] = MarqueeContainer.ActualWidth * -1
MarqueeContainer.Visibility = Visibility.Hidden
SBMarquee.Begin()
MarqueeContainer.Visibility = Visibility.Visible
End Sub
End Class
Cool.
I'm not familiar with partial classes, but a quick check online seemed to suggest to me that I could just include the relevant parts into my VB class for the main window.
I don't know if the "initializeComponent" part is required, but it didn't throw an error. However, the attempt to create a Storyboard object met with some resistance. I figured that I needed an "Imports" command to get the proper namespace added (full disclosure: the idea of "namespaces" isn't obvious to me, but I get that something needed to be imported... the "namespace" moniker doesn't seem to fit, and I'm too literal). Here is what I added, right at the very top (above the "class" line):
Imports System.Windows.Media.Animation
Now these lines works:
Private story_OnAirUp As Storyboard
Private timeline_OnAirUp As DoubleAnimationUsingKeyFrames
The first line creates a Storyboard object, and the second makes the necessary timeline object. I thought at first I would be making an "EasingDoubleKeyFrame" object, which I could have made, but the child object of the Storyboard object is not a keyframe (well, not with the XAML constructed using the DoubleAnimationUsingKeyFrames element); my initial attempts to use a keyframe met with resistance. Here is what I tried which didn't work:
Private story_OnAirUp As Storyboard
Private keyframe_OnAirUp As EasingDoubleKeyFrame
No errors at this point, so I thought I was golden. Not so fast, young padawan.
Here is the next code I added, altered from the marquee example:
Private Sub Window_ContentRendered(sender As Object, e As EventArgs)
story_OnAirUp = TryCast(Me.Resources("story_OnAirUp"), Storyboard)
keyframe_OnAirUp = TryCast(story_OnAirUp.Children(1), EasingDoubleKeyFrame)
keyframe_OnAirUp.Value = grid_Top.ActualHeight / 2
AddHandler Me.SizeChanged, AddressOf MainWindow_SizeChanged
End Sub
No dice. The "TryCast(story_OnAirUp.Children(1)" part generates an error:
"Value of type 'Timeline' cannot be converted to 'EasingDoubleKeyFrame'."
Well, that stinks.
After some more comparison of the code, I see that my XAML code differs from the marquee example because of the inclusion of this line:
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid_OnAir">
So, the child of the Storyboard object isn't the EasingDoubleKeyFrame (well, not directly), but rather is the "DoubleAnimationUsingKeyFrames" element. However, the value I need to bind to isn't in the DoubleAnimationUsingKeyFrames element; it is in the EasingDoubleKeyFrame.
(Note: the sample code had "DoubleAnimation" the altered property as "To:" but the "EasingDoubleKeyFrame" uses the "value" property; I noticed that and adjusted accordingly.)
I tried to make a child object of the DoubleAnimationUsingKeyFrames element, but turns out "children" is a property of it. Then it dawned on me:
timeline_OnAirUp.KeyFrames(1).Value = grid_Top.ActualHeight / 2
The "(1)" points to the second keyframe, which is the one where the "On Air" grid is at the "full height," which has a default value of 84 pixels, but needs to change.
After I got the "Window_ContentRendered" done, I tried running the code.
Error in the "MainWindow_SizeChanged" subroutine:
"An unhandled exception of type 'System.NullReferenceException' occurred in WpfApplication3.exe
Additional information: Object reference not set to an instance of an object."
Hmmm. Okay, the "MainWindow_SizeChanged" routine is running before the "Window_ContentRendered" routine, not allowing the objects to be instantiated before they were used.
I moved the object creation code from "Window_ContentRendered" to "MainWindow_SizeChanged," remarked our the "ContentRendered" routine, and then tried again.
It worked. Here's the code which works:
XAML
<Window x:Name="SmartClock" x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication3"
xmlns:System="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="800">
<Window.Resources>
<!-- Simple keyframe animation, which slides a bar with text into view -->
<Storyboard x:Key="story_OnAirUp" x:Name="OnAirUp">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid_OnAir">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<!-- **** This is the keyframe which has a changed value from the VB code -->
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="84"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<!-- Animation is triggered by clicking the button -->
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button1">
<BeginStoryboard Storyboard="{StaticResource story_OnAirUp}"/>
</EventTrigger>
</Window.Triggers>
<!-- Here we setup the page -->
<Grid x:Name="grid_Page" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="4*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<!-- This is "status" grid at the top of the page -->
<Grid x:Name="grid_Top" Grid.Row="0" d:LayoutOverrides="LeftMargin, RightMargin, TopMargin, BottomMargin" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Name="row_ProgramName"/>
<RowDefinition Name="row_Status" Height="Auto"/>
</Grid.RowDefinitions>
<Viewbox x:Name="viewbox_ProgramName" Grid.Row=" 0" Margin="0" Stretch="Uniform">
<TextBlock x:Name="textblock_ProgramName" Text="Some text on top" Background="#FFFFFF12"/>
</Viewbox>
<!-- This creates a grid which will hold the "ON AIR" bar -->
<Grid x:Name="grid_OnAir" Grid.Row="1" VerticalAlignment="Bottom" ShowGridLines="True" Height="84" >
<Rectangle x:Name="rectangle_OnAir" Fill="#FF90A436" RadiusX="20" RadiusY="20" Margin="10,0" Height="83"/>
<Viewbox x:Name="viewbox_OnAir" Grid.Row="1" Margin="0" Stretch="Uniform">
<TextBlock x:Name="textblock_OnAir" Text="ON AIR" FontSize="64" VerticalAlignment="Top" FontWeight="Bold" Background="#FFDC0000" Margin="0" HorizontalAlignment="Center" />
</Viewbox>
</Grid>
</Grid>
<!-- This is a big ugly button for triggering the storyboard -->
<Button x:Name="button1" Content="Button" Margin="0" Grid.Row="1" FontSize="26.667" HorizontalAlignment="Left" Width="257"/>
</Grid>
</Window>
VB
Imports System.Windows.Media.Animation
Class MainWindow
Public Sub New()
InitializeComponent()
End Sub
Private story_OnAirUp As Storyboard
Private timeline_OnAirUp As DoubleAnimationUsingKeyFrames
Private Sub MainWindow_SizeChanged(sender As Object, e As SizeChangedEventArgs) Handles Me.SizeChanged
' These next three lines were moved from the "ContentRendered" section
story_OnAirUp = TryCast(Me.Resources("story_OnAirUp"), Storyboard)
timeline_OnAirUp = TryCast(story_OnAirUp.Children(0), DoubleAnimationUsingKeyFrames)
timeline_OnAirUp.KeyFrames(1).Value = grid_Top.ActualHeight / 2
rectangle_OnAir.Height = grid_Top.ActualHeight / 2
viewbox_OnAir.Height = grid_Top.ActualHeight / 2
grid_OnAir.Height = grid_Top.ActualHeight / 2
' This is the line which actually sets the value to the animation keyframe.
timeline_OnAirUp.KeyFrames(1).Value = grid_Top.ActualHeight / 2
End Sub
End Class
Thanks for pointing me in the right direction, and I hope my follow-up (admittedly long) helps someone else.