How would I make this storyboard go off on a click in the windows 10 uwp? My app just crashes on initialize component.
<AppBarButton x:Name="nextButton" Label="next" Icon="Forward" Click="nextButton_Click">
<AppBarButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="messageTextBlock"
Storyboard.TargetProperty="(TextBlock.Opacity)"
To="0.0" From="1.0" Duration="0:0:01" />
</Storyboard>
</EventTrigger>
</AppBarButton.Triggers>
</AppBarButton>
Related
I am trying to Collapse/Expand Grid with animation and while it's animating move all other components accordingly.
So far I used
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="GridName">
<DiscreteObjectKeyFrame KeyTime="0:0:0.59" Value="0,0,0,0" />
(...more frames)
</ObjectAnimationUsingKeyFrames >
But the effect is far from acceptable (animation not smooth). I was wandering if the new controls has such options? I also came across some Expanding/Collapsing ListViews - but they did not work with which contains data.
Edit: I tried animating the heights property - but nothing happen (no error and no visible result). Below my code:
<Storyboard x:Name="MainImageSlideOut">
<DoubleAnimation Duration="0:0:1" To="0"
Storyboard.TargetProperty="Height"
Storyboard.TargetName="Grid"
EnableDependentAnimation="True"/>
</Storyboard>
<Storyboard x:Name="MainImageSlideIn">
<DoubleAnimation Duration="0:0:1" To="250"
Storyboard.TargetProperty="Height"
Storyboard.TargetName="Grid"
EnableDependentAnimation="True"/>
</Storyboard>
....
<Grid Background="#171717">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="1"
Height="250"
x:Name="Grid"
Background="#202020" />
<ScrollViewer Grid.Row="2">
...
</ScrollViewer>
</Grid>
I have a similar functionality in my application.
the way I use it is by using ScaleTransform here is an example:
<Storyboard x:Key="gridLoading">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="IAmGroot">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="IAmGroot">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
This will load the grid from the middle of the screen and expand it to fit the screen.
If you want to perform an animation on all of the elements then this animation will do the trick, however if you need different behavior you will probably have to handle animation for the items inside of your Grid separately.
HTH
I have a style trigger that causes my stackpanel to fade in and out with mouseover. I would like to add a checkbox to my stackpanel that will cause it to stay open when checked. How can I stop a storyboard in XAML when my checkbox is checked?
<StackPanel Width="25" Opacity="0" Margin="0,0,0,5" HorizontalAlignment="Stretch"
DockPanel.Dock="Right" Background="#FFEEEEEE">
<StackPanel.Style>
<Style>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="CloseStoryBoard" />
<BeginStoryboard Name="OpenStoryBoard">
<Storyboard DecelerationRatio="0.8">
<DoubleAnimation
Storyboard.TargetProperty="(FrameworkElement.Width)" To="600" />
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To=".95" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="OpenStoryBoard" />
<BeginStoryboard Name="CloseStoryBoard">
<Storyboard DecelerationRatio="0.8">
<DoubleAnimation
Storyboard.TargetProperty="(FrameworkElement.Width)" To="25.0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<CheckBox Content"Keep Open" />
</StackPanel>
You can use ControlTemplate instead of StackPanel.Style. But ControlTemplate must declared in Window.Resources. I make this code for you. I hope it works that way which is the you wish.
<Window.Resources>
<ControlTemplate x:Key="myResource" TargetType="ContentControl">
<StackPanel Name="myStackPanel" Width="25" Background="Black" Opacity="0">
<CheckBox Name="myCheckBox" HorizontalAlignment="Center" Content="Keep Open" Foreground="Aqua"/>
</StackPanel>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition SourceName="myStackPanel" Property="IsMouseOver" Value="True"/>
<Condition SourceName="myCheckBox" Property="IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="25" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="0.0" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition SourceName="myCheckBox" Property="IsChecked" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="25" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="0.01" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<ContentControl Template="{StaticResource myResource}"/>
Although I am answering this, credit goes to Zafar above in getting me started. There was one more condition that needed to be added to his suggestion to get exactly the solution I was looking for. I wanted to post the complete solution in case anyone needs this functionality. Below is a StackPanel that fades in and out with the mouseover/out action. It stays open if the checkbox is checked, regardless of mouse position. And goes back to using the mouse over/out once the checkbox is unchecked. I put opacity at 1 for testing, but be sure to set your opacity as needed.
<UserControl.Resources>
<ControlTemplate x:Key="SlideoutResource" TargetType="ContentControl">
<DockPanel HorizontalAlignment="Stretch">
<StackPanel Name="SlideoutStackPanel" Width="25" Opacity="1" Margin="0,0,0,5" HorizontalAlignment="Stretch" DockPanel.Dock="Right" Background="#FFEEEEEE">
<CheckBox Name="KeepOpenCheckBox" Content="Keep Open" />
</StackPanel>
<Rectangle Name="DummyPlaceHolder" /> <!-- This placeholder is needed to make the fade work. -->
</DockPanel>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition x:Name="MouseOverCondition" SourceName="SlideoutStackPanel" Property="IsMouseOver" Value="True"/>
<Condition SourceName="KeepOpenCheckBox" Property="IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition SourceName="KeepOpenCheckBox" Property="IsChecked" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition x:Name="MouseOutCondition" SourceName="SlideoutStackPanel" Property="IsMouseOver" Value="False"/>
<Condition SourceName="KeepOpenCheckBox" Property="IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="25" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
<ContentControl Template="{StaticResource SlideoutResource}"/>
I have the following XAML Grid:
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="mainGrid">
<Grid.Resources>
<Storyboard x:Name="FadeOut">
<DoubleAnimation Duration="3" To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="gridBackgroundImageBrush" d:IsOptimized="True"/>
</Storyboard>
<Storyboard x:Name="FadeIn">
<DoubleAnimation Duration="3" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="gridBackgroundImageBrush" d:IsOptimized="True"/>
</Storyboard>
</Grid.Resources>
<Grid.Background>
<ImageBrush x:Name="gridBackgroundImageBrush" ImageSource="{Binding BackgroundImage}" Opacity="0.35">
</ImageBrush>
</Grid.Background>
I want to programmatically start the "FadeOut" animation and change the Image from ImageBrush, then start the "FadeIn" animation, like this:
private void t_Tick(object sender, object e)
{
try
{
FadeOut.Begin();
this.DefaultViewModel["BackgroundImage"] = BackgroundImage;
FadeIn.Begin();
}
catch { }
}
However the image is changing without any animation. I guess the problem is about how I'm accessing the "Opacity" property of the ImageBrush. I tried the following syntax for the
TargetProperty attribute:
(Control.Background).(ImageBrush.Opacity)
as msdn shows here: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.storyboard.settargetproperty.aspx but it doesn't seem to work. Can someone help me with this problem?
The solution was to create an image control rather than drawing the image with ImageBrush and then defining visual states for fading:
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="mainGrid">
<Image Grid.RowSpan="2" x:Name="gridBackgroundImageBrush" Source="{Binding BackgroundImage}" />
</Grid>
<VisualStateGroup x:Name="FadeStates">
<VisualState x:Name="FadeOutState">
<Storyboard>
<DoubleAnimation Duration="{Binding fadeDuration}" From="0.5" To="0.0" x:Name="fadeOutAnimation"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="gridBackgroundImageBrush" />
</Storyboard>
</VisualState>
<VisualState x:Name="FadeInState">
<Storyboard>
<DoubleAnimation Duration="{Binding fadeDuration}" From="0.0" To="0.5" x:Name="fadeInAnimation"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="gridBackgroundImageBrush" />
</Storyboard>
</VisualState>
</VisualStateGroup>
I'm looking for some way to combine storyboards into other storyboards in XAML.
In the following example, Thing1 and Thing2 are two TextBlocks that slide onto a Canvas from the top and bottom, respectively. I intend that only one, the other, or neither is visible at any time, so I set up three states in the VisualStateManager, inside a single VisualStateGroup, with Transitions among the various states.
I'd like to be able to write the Storyboards for Thing1ToThing2 and Thing2ToThing1 in the context of the other, simpler Storyboards. For instance, is there any way to have the storyboard Thing1ToThing2 call/invoke/reference/be composed of Thing1Out and Thing2In? The code can be duplicated, of course, but can we do any better than that? Or, is there a way to have the VisualTransitions do more?
I'd prefer to keep this in XAML, if possible, and in a way that scales for larger numbers of things.
Thanks!
-David
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="500" Background="PaleTurquoise" >
<UserControl.Resources>
<Storyboard x:Key="Thing1In">
<DoubleAnimation Storyboard.TargetName="Thing1" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:2" To="100" />
</Storyboard>
<Storyboard x:Key="Thing1Out">
<DoubleAnimation Storyboard.TargetName="Thing1" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:2" To="-100" />
</Storyboard>
<Storyboard x:Key="Thing2In">
<DoubleAnimation Storyboard.TargetName="Thing2" Storyboard.TargetProperty="(Canvas.Bottom)" Duration="0:0:2" To="100" />
</Storyboard>
<Storyboard x:Key="Thing2Out">
<DoubleAnimation Storyboard.TargetName="Thing2" Storyboard.TargetProperty="(Canvas.Bottom)" Duration="0:0:2" To="-100" />
</Storyboard>
<Storyboard x:Key="Thing1ToThing2">
<!--do Thing1Out then (or at the same time as) Thing2In-->
</Storyboard>
<Storyboard x:Key="Thing2ToThing1">
<!--do Thing2Out then (or at the same time as) Thing1In-->
</Storyboard>
</UserControl.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ThingStates">
<VisualState x:Name="NothingInState" />
<VisualState x:Name="Thing1InState" Storyboard="{StaticResource Thing1In}" />
<VisualState x:Name="Thing2InState" Storyboard="{StaticResource Thing2In}" />
<VisualStateGroup.Transitions>
<VisualTransition From="Thing1InState" To="Thing2InState" Storyboard="{StaticResource Thing1ToThing2}" />
<VisualTransition From="Thing2InState" To="Thing1InState" Storyboard="{StaticResource Thing2ToThing1}" />
<VisualTransition From="Thing1InState" To="NothingInState" Storyboard="{StaticResource Thing1Out}" />
<VisualTransition From="Thing2InState" To="NothingInState" Storyboard="{StaticResource Thing2Out}" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Canvas ClipToBounds="True">
<TextBlock x:Name="Thing1" Text="Thing1" FontSize="60" Canvas.Top="-100" Canvas.Left="100" />
<TextBlock x:Name="Thing2" Text="Thing2" FontSize="60" Canvas.Bottom="-100" Canvas.Left="100" />
</Canvas>
</UserControl>
I have been creating a menu which when you click a button it slides out and click it again it slides in. A bit like the way the android menu system works, although you dont drag this you just click it.
So I was wondering how do you hide an element off screen? I have tried setting the global offset, but depending on the screen resolution I can still see rectangles and circles which should be hidden. I did get it to work using margins, but it meant i would have huge margins to hide elements, just didnt seem correct. I cant use visibility, because i need to animate the menu coming in from below the button. I have been using expression blend 4.
Any help would be great?
Well I solved one of the problems. I managed to hide the components off screen by aligning them to the bottom or to the left and then changing the render transform value to hide them off screen. My new problem is when i click the eclipse button a rectangle should fill the whole background but it only fills a portion off it.
Hi, thanks for the reply Joel, I actually found that by setting the width and height of the design view worked. But on different resolutions i could see this not working. My code for this is...
Xaml:
<UserControl.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="ellipse" Fill="#FF8D5216" Stroke="Black"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Margin="0" Background="Transparent" Height="384" VerticalAlignment="Bottom">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Move">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="BlackBoarder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="20" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="BaseBoarder" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Down"/>
<VisualState x:Name="SlideAcross"/>
<VisualState x:Name="SlideBack"/>
<VisualState x:Name="FlipForward">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="FlipBack">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BlackBoarder" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="grid" Height="400" VerticalAlignment="Bottom" Background="Orange" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,-21">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RenderTransform>
<CompositeTransform TranslateY="360"/>
</Grid.RenderTransform>
<Rectangle x:Name="MovingButtonTab" Fill="Black" Height="15" Margin="0,-14,0,0" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Center" Width="250" MouseLeftButtonDown="ButtonTab_MouseLeftButtonDown"/>
<Rectangle x:Name="BlackBoarder" Fill="Gray" Margin="0" Stroke="Black" RenderTransformOrigin="0.5,0.5">
<Rectangle.Projection>
<PlaneProjection/>
</Rectangle.Projection>
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="TitleRect" Fill="Black" Height="20" Margin="0" Stroke="Black" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" />
<sdk:Label Height="20" Margin="0" Width="219" Content="" Background="Orange" Foreground="White" VerticalAlignment="Top" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
</Grid>
<Rectangle x:Name="BaseBoarder" Fill="Gray" Height="20" Stroke="Black" VerticalAlignment="Bottom"/>
So i'm guessing on the main parent grid view I should add the xaml:
<RectangleGeometry Rect="0,0,640,480" />
And just adjust the numbers to the desired size? Would this still have the same problem of not working on all resolutions though?
Also, my control that I have created isn't transparent, even though i have set the parent grid to "transparent" it still has a "white" background. Basically it fills the screen by the height that the menu bar can reach even before the user clicks on it. Is there away round this?
I solved the solution of the white background. Using RenderTransform to move the object off the viewing area in the "Base" state seems to cause the issue. Using margins, actually solves the issue. I can't tell you why though... I just tried it out and it worked.
Thanks Again
In Silverlight, you need to add a Clipping Region to your base container.
<Grid>
<Grid.Clip>
<RectangleGeometry Rect="0,0,640,480" />
</Grid.Clip>
// other content
</Grid>
You'll need to modify the Rect paramteres or add some binding to match your application.
One caveat: Blend respects the Clipping Region, so once you add it you won't be able to see the elements that are drawn "offscreen" anymore.