We Keep Coding

Acrobat-like PopUp in WPF

Im recently working on some simple Imageviewer.
Now it came to my mind, it might be a nice feature, to do some context-sensitve actions like Zooming and rotating.
To implement these functions is not my problem, but the ContextMenu is.
I've decided to not use a ContextMenu-Element, instead im going to use a popup.
Reasons for PopUp:
Less Styling
Better Positioning
IsOpen is Bindable (ContextMenu is NOT bindable on IsOpen against all Articles regarding this)
Here comes the trouble:
<Image x:Name="PART_ImgCurrent" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Grid.Row="0" Grid.Column="0"
Source="{Binding ElementName=PART_PreviewPanel, Path=SelectedItem.Source}">
<Image.LayoutTransform>
<RotateTransform Angle="0"></RotateTransform>
</Image.LayoutTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_ImgCurrent" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<Popup IsHitTestVisible="False" Focusable="False" PlacementTarget="{Binding ElementName=PART_ImgCurrent}" AllowsTransparency="True" StaysOpen="True"
IsOpen="{Binding ElementName=PART_ImgCurrent, Path=IsMouseOver, Mode=OneWay}"
Placement="Right" HorizontalOffset="-42" VerticalOffset="2">
<StackPanel Opacity="0.5" VerticalAlignment="Stretch">
<Button Content="Ugly Button" Height="40" Width="40"></Button>
<Button Content="Ugly Button" Height="40" Width="40"></Button>
<Button Content="Ugly Button" Height="40" Width="40"></Button>
</StackPanel>
</Popup>
As you can see, im binding IsOpen of Popup to IsMouseOver on Image which results in a funny Disco-BlinkenLights-Behavior when i try to click a button inside the Popup.
What has this to do with the Title?
AcrobatReader has this
This is almost exactly the behavior im looking for. How is this thing called?
Or had someone ever similar issues and could provide a solution?

Sorry for the delay, soon as I thought I had a second I got busy again. Anyway, here's one of several ways I can think of accomplishing your goal, give it a shot. I sort of assumed it may not be just images you want this for and if you threw the resource stuff in a dictionary and kept your naming consistent (or even better, just target the nested UIElement) you could use it all over the place. Notice the Grid is acting as what would be the Image in this example.
I generally make things open for future added interactions and stuff, so in this case I would probably just make the image source the background brush for Grid or place it as a child. That way if you decide to add other objects in there or say other effects and stuff you've got a good start point.
Anyway I digress, so try out the concept example below and see if it's what you're after. If not, like I said there's several other ways I can think of to accomplish your goal so just let me know. :)
<!-- HitTestVisibility Area -->
<Grid x:Name="ImagePlaceholder"
Height="500" Width="500"
Background="LightBlue">
<Grid.Resources>
<Storyboard x:Key="OnMouseEnter">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="FakePopUp">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="FakePopUp">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeave}"/>
</EventTrigger>
</Grid.Triggers>
<!-- Overlay -->
<Border Name="FakePopUp" Visibility="Collapsed"
Margin="0,0,0,25" Background="SlateGray"
Height="50" CornerRadius="20" Padding="10"
HorizontalAlignment="Center" VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal">
<Button Content="Eins Bier"/>
<Button Content="Zwei Bier" Margin="10,0"/>
<Button Content="Drei Bier"/>
</StackPanel>
</Border>
</Grid>
I went with Storyboards attached to the parent instead of direct triggers with TargetName like I said, because I could think of a bunch of other instances features might want to be added that would make sense. Even something simple like adding a transition duration for a nice fade effect or maybe a translate y to slide it up while fading etc, etc, etc.
Anyway, hope this helps. Cheers!

How do I animate a custom components Rotation Transformation?

Given the following :
<Viewbox>
<Foo:Bar
x:FieldModifier="private"
x:Name="fooBar"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Foo:Bar.RenderTransform>
<TransformGroup>
<ScaleTransform
x:FieldModifier="private"
x:Name="xfScale"/>
<RotateTransform
x:FieldModifier="private"
x:Name="xfRotate"/>
</TransformGroup>
</Foo:Bar.RenderTransform>
<Foo:Bar.Style>
<Style TargetType="{x:Type Foo:Bar}">
<Style.Triggers>
<DataTrigger
Binding="{
Binding Flip,
RelativeSource={
RelativeSource AncestorType={
x:Type local:myFooBar}}}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty=""/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Foo:Bar.Style>
</Foo:Bar>
</Viewbox>
Which is for a new component that is basically a fancy label stuck inside of a ViewBox (for auto-scaling the label), what do I need to point the Storyboard.TargetProperty at to be able to animate, say, the RotateTransform Angle property?

Your TargetName will need to be set for your xfScale / xfRotate named transforms respectfully.
Your TargetProperty will be the properties of the transforms used.
Like for Scale;
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
and
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Except that only specifies the Property, you still need to provide a Value to animate to. So in it's entirety, it would become something like;
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="xfScale"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
</DoubleAnimationUsingKeyFrames>
Or for Rotate you need your Angle Property. It's worth mentioning, Blend makes this stuff much quicker/easier to do than by hand, especially for complex animations.
Hope this helps, cheers.

WP8, DoubleAnimation - "Cannot resolve TargetName" exception

I want to create marquee effect in WP8 application.
To accomplish this I placed StackPanel inside ScrollViewer and I'm trying to use DoubleAnimation on TranslateTransform.X property.
Code:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Storyboard.TargetName="transform" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot">
...
<ScrollViewer Height="80" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transform" />
</StackPanel.RenderTransform>
<Image Source="/Assets/logo1.png"></Image>
<Image Source="/Assets/logo2.png"></Image>
<Image Source="/Assets/logo3.png"></Image>
<Image Source="/Assets/logo4.png"></Image>
<Image Source="/Assets/logo5.png"></Image>
</StackPanel>
</ScrollViewer>
</Grid>
Unfortunately when calling Scroll.Begin() from code-behind in page Loaded event handler I'm getting exception: System.InvalidOperationException: Cannot resolve TargetName transform.
What I'am doing wrong?
Animation runs when I place StackPanel directly in LayoutRoot but not when it's child of ScrollViewer.

I think the exception is explanatory. Like you apply storyboard on some UI element but there is no element named "transform" in your xaml to which this storyboard will be going to be applied.
so this property Storyboard.TargetName should be name of the UI element that has to be transformed.
In your case if you have to simply give your StackPanel a name say MyStackPanel and then put this name in place of transform in your storyboard code.
<StackPanel Orientation="Horizontal" Name="MyStackPanel">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transform" />
</StackPanel.RenderTransform>
...
You storyboard should be changedin this way..
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Storyboard.TargetName="MyStackPanel" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
Important :-It would be much better if you just use Blend for making a simple animation and then see how the animation code generated in the page Xaml. You will got all of your answers :)

SolidColorBrushes as Dynamic Resources are not updating

I have a window with a number or Dynamic Resources for colors/brushes on it.
For example this; EXAMPLE 1 DOES NOT UPDATE "DynamicResource ColFancyMed"
<Rectangle x:Name="dbBarPeekOutRect1" Margin="3,10,10,10" >
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource ColFancyMed}" />
</Rectangle.Fill>
</Rectangle>
When my App starts the Resource file is read and the right color is shown.
These colors are however themed and so I have a number of resource dictionaries with these resource keys in them. Thus I change the resource dictionary like this
Application.Current.Resources.MergedDictionaries.RemoveAt(0)
Application.Current.Resources.MergedDictionaries.Insert(0, dict)
This works elsewhere but not on the above. The funny thing is if I use the following. The only difference I can see is one is a Color and the other is a SolidColorBrush.
EXAMPLE 2 DOES UPDATE "DynamicResource ColFancyMed"
<Rectangle x:Name="dbBarPeekOutRect1" Margin="3,10,10,10" Fill="{DynamicResource ColFancyMed}"/>
Then the color changes.
So why does example 1 NOT work and example 2 work?
Similarly another place where it does not work is in the for example;
<Storyboard x:Key="dbBarPeekOutHighlight">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="dbBarPeekOutRect1">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ColFancyMed}"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFF2F6F9"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="dbBarPeekOutRect2">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ColFancyMed}"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFF2F6F9"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
Any help would be appreciated.

Regarding the last example with the storyboard, as MSDN states here
You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. That's because everything inside a Style must be thread-safe, and the timing system must Freeze Storyboard objects to make them thread-safe. A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. For more information about freezing and other Freezable features, see the Freezable Objects Overview.
Regarding the first example I'm not sure if the problem is that you're instantiating a SolidColorBrush object instead of binding directly to your resource.

For me, this example works:
<Grid>
<Rectangle x:Name="dbBarPeekOutRect1" Width="100" Height="100" Margin="3,10,10,10" >
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource MyColor}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="dbBarPeekOutRect2" Width="100" Height="100" HorizontalAlignment="Left" Fill="{DynamicResource MyColor2}"/>
<Button Name="ChangeResource" Content="ChangeResource" Width="100" Height="30" VerticalAlignment="Bottom" Click="ChangeResource_Click" />
</Grid>
Handler of ChangeResource Button:
private void ChangeResource_Click(object sender, RoutedEventArgs e)
{
Color MyCodeColor = Colors.BlanchedAlmond;
SolidColorBrush MyBrush = Brushes.Aquamarine;
// Set the new value
Application.Current.Resources["MyColor"] = MyCodeColor;
Application.Current.Resources["MyColor2"] = MyBrush;
}
I put the color in the resources App.xaml file:
<Application.Resources>
<Color x:Key="MyColor">#D8C13E</Color>
<SolidColorBrush x:Key="MyColor2" Color="Green" />
</Application.Resources>
As for the animation... If I'm not mistaken, when the animation is used, an WPF Animation will lock the target properties value as long as the animation is still active. Therefore DynamicResource transformed into StaticResource. As example: also when you use the property Opacity in animation, the code does not have access.

Update page layout before Thread.Sleep()

I have a TextBlock on my page with Text value null (""). When I click a button I want to change the Text value for this TextBlock, pause half a second and then move the TextBlock one pixel at a time to a certain point.
I tried using Thread.Sleep(), but so far, I have a problem. I click the button, the UI thread pauses for half a second, then the TextBlock suddenly appears and starts moving. I want it to appear as soon as I click the button.
P.S.: I know Thread.Sleep() doesn't work. I am willing to use anything that works.

Storyboards and animations are the preferred mechanism for moving items on the screen. For one thing, they are optimized to work with the phones threading model. For another, putting your UI thread to sleep is a bad idea as you are making a non responsive application.
Here's a quick example of how to move a texblock with a story board.
The UI elements.
<Grid
x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<TextBlock
Margin='79,263,177,307'
Name='textBlock1'
Text='TextBlock'
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform />
</TextBlock.RenderTransform>
</TextBlock>
<Button
Content="Button"
Height="80"
Margin="116,0,188,144"
VerticalAlignment="Bottom"
Click='Button_Click' />
</Grid>
The storyboard, defined in the page resources section.
<phone:PhoneApplicationPage.Resources>
<Storyboard
x:Name="MoveTextBlockStoryboard">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="textBlock1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.1"
Value="120" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="textBlock1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.1"
Value="-105" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
The code that changes the text and starts the storyboard.
private void Button_Click(object sender, RoutedEventArgs e) {
textBlock1.Text = "new text";
MoveTextBlockStoryboard.Begin();
}

Try using a storyboard instead of writing code to do this. I think it will perform better for you than a manual approach.