Slider component in WP8 won't move - xaml

I have a Slider component in my WP7 and WP8 app. In WP7, the Slider moves according to its Scheduler, but in WP8, it simply just won't move.
The Slider is styled, and I know there is some changes in WP8. First of all, what exactly are those changes and what do I change in code? The documentation from Microsoft is poor. Anyone got an idea of what this can be, maybe other than the changes from Microsoft?
And even if I set the default value to something, the thumb will always be in its starting position. I can't move it either.
For me, this applies to a various different styles, e.g. from Mifrosofts own Slider Styles and Templates.
This one has a template:
<Slider x:Name="Slider" IsHitTestVisible="true" Value="{Binding SliderValue, Mode=TwoWay}" Maximum="100" VerticalAlignment="Center" Margin="0,24,0,0" Template="{StaticResource SliderControlTemplate1}" />
Here is the template:
<ControlTemplate x:Key="SliderControlTemplate1" TargetType="Slider">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/>
<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalTrack"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalFill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalFill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0"/>
<Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0" Opacity="0.2"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<Thumb x:Name="HorizontalCenterElement" Grid.Column="1" Height="12" Margin="0" Width="12">
<Thumb.Template>
<ControlTemplate>
<Grid ManipulationDelta="ProgressBarManipulationDelta" Width="46" Height="46" VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="/slider.png"/>
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</ControlTemplate>
And I have tried a corresponding Style. What could be the problem? Should I use Style or Template? Both acts equally for me now..

Had the same issue. Before WP8, we had edited a copy of its original style and modified it to our purposes. Later, when upgrading the project to WP8 this modified style from WP7 caused the slider not getting updated anymore as the style has changed since. Removing the style fixed it. In case the modifications are still needed, you should get the original style from WP8's slider component.

Related

Windows Phone XAML CheckBox Alignment

I have a problem with my XAML layout, this works perfectly on my Silverlight app, but when using Windows Runtime, all the checkboxes disappear from the grids entirely, yet the textblocks are aligned perfectly. I don't know what to change in my XAML to make it work correctly.
I figured out that the culprit is the HorizontalAlignment property, without it, the checkBoxes appear in the grids (though all snapped to the left side of the columns). The Textblocks use the same property, yet they appear completely fine.
This is what it looks like when using Silverlight:
<Grid Height="Auto" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<CheckBox Name="ARStory" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0"/>
<CheckBox Name="ARPath1" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1"/>
<CheckBox Name="ARPath2" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="2"/>
<CheckBox Name="ARPath3" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="3"/>
<CheckBox Name="ARPath4" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="4"/>
<TextBlock Text="Story" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock Text="Path 1" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center"/>
<TextBlock Text="Path 2" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center"/>
<TextBlock Text="Path 3" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Center"/>
<TextBlock Text="Path 4" Grid.Row="1" Grid.Column="4" HorizontalAlignment="Center"/>
</Grid>
I would much rather edit the checkbox template instead of separating the box and the label because:
Users expect that the content/label of a checkbox control can be tapped to check/uncheck the box.
If the label is tapped, the whole checkbox control will tilt as part of the normal pointer down theme animation.
I'm sure there's also some accessibility reason too (like e.g. screen readers will be able to interpret the control correctly).
You can easily reuse the style anywhere you want.
<Page.Resources>
<Style x:Key="CheckBoxStyleCentered" TargetType="CheckBox">
<Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Padding" Value="0,10,0,0"/>
<Setter Property="MinWidth" Value="50"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Grid" Margin="{ThemeResource PhoneTouchTargetLargeOverhang}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Center">
<Border x:Name="CheckBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Left" Height="25.5" IsHitTestVisible="False" VerticalAlignment="Center" Width="25.5"/>
<Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" HorizontalAlignment="Center" Height="13" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="13"/>
<Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" Visibility="Collapsed" VerticalAlignment="Center" Width="18.5"/>
</Grid>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Row="1" Foreground="{TemplateBinding Foreground}" FontWeight="Normal" FontSize="{ThemeResource TextStyleLargeFontSize}" FontFamily="{ThemeResource PhoneFontFamilyNormal}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Height="Auto" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Name="ARStory" HorizontalAlignment="Center" Grid.Column="0" Content="Story" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath1" HorizontalAlignment="Center" Grid.Column="1" Content="Path 1" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath2" HorizontalAlignment="Center" Grid.Column="2" Content="Path 2" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath3" HorizontalAlignment="Center" Grid.Column="3" Content="Path 3" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath4" HorizontalAlignment="Center" Grid.Column="4" Content="Path 4" Style="{StaticResource CheckBoxStyleCentered}" />
</Grid>
Why your XAML doesn't work as expected
If you inspect the original checkbox style (right click an unstyled checkbox in the designer > Edit Template > Edit a Copy), you'll see that the default style sets the MinWidth of the checkbox control:
<Setter Property="MinWidth" Value="{ThemeResource CheckBoxAndRadioButtonMinWidthSize}"/>
with
<x:Double x:Key="CheckBoxAndRadioButtonMinWidthSize">168</x:Double>
This is too large and causes the checkbox glyph to be pushed outside the bounds of the grid cell, which is why it isn't visible. Set MinWidth="0" to each of your checkboxes and you'll restore the original layout you expected.

Buttons styled to look like app bar buttons

Is it possible to style a xaml button tag to look like an application bar button by changing the style? and how can it be done.
Hope this Helps.
<Page.Resources>
<Style x:Key="RoundedButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Ellipse Name="Ellipse" Grid.Row="0" StrokeThickness="1" Fill="{TemplateBinding Background}" Height="40" Width="40" Stroke="White"></Ellipse>
<ContentPresenter Name="Content" Grid.Row="0" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
<TextBlock Text="{TemplateBinding Tag}" Grid.Row="1" Margin="0,-2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="12" Foreground="White" FontFamily="Segoe Ui"></TextBlock>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.8"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="" Style="{StaticResource RoundedButton}" FontSize="19" FontFamily="Segoe Ui Symbol" Tag="Delete" Background="RoyalBlue" />
<Button Content="" Margin="10,0,0,0" Style="{StaticResource RoundedButton}" FontSize="16" FontFamily="Segoe Ui Symbol" Tag="Mail" Background="ForestGreen" />
<Button Content="" Margin="10,0,0,0" Style="{StaticResource RoundedButton}" FontSize="17" FontFamily="Segoe Ui Symbol" Tag="Back" Background="Red" />
</StackPanel>
Output
Check this page for existing styles which you can reuse to create a similar button.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx
But there is no style that renders a button to look like an app bar button (e.g. a circle instead of a rectangle). You will have to render this on your own using this brush:
PhoneChromeBrush
or this color:
PhoneChromeColor
But you should first check the Microsoft style guidelines whether this is a good idea or not. I am not aware of a limitation to not mimic app bar buttons, but the user would probably not expect to see such buttons somewhere else than on the bottom.
You can get the ready to use class for round button here: Create a round button control for Windows Phone.

windows 8 xaml inline hyperlink

How do I create properly formatted hyperlinks in Windows Store Apps in XAML? I tried creating an inline hyperlink and want to style it with a staticresource:
<RichTextBlock Style="{StaticResource PageHeaderTextStyle}" Grid.ColumnSpan="2">
<Paragraph>
<Run>"A sentence with inline text "</Run>
<InlineUIContainer>
<HyperlinkButton Background="Yellow">
my link
</HyperlinkButton>
</InlineUIContainer>
<Run>... some more text</Run>
</Paragraph>
</RichTextBlock>
i get the following where the hyperlink is not aligned with the rest of the sentence:
Well, I tried this to no avail:
<RichTextBlock FontSize="20">
<Paragraph Foreground="White" FontFamily="Segoe UI Light">
<Run>Now is the time for</Run>
<InlineUIContainer>
<HyperlinkButton Content="all good men">
<HyperlinkButton.Template>
<ControlTemplate>
<TextBlock Margin="5,0,5,0" FontSize="20" FontFamily="Segoe UI Light"
Text="{Binding Content, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
</InlineUIContainer>
<Run>to come to the aid of their country</Run>
</Paragraph>
</RichTextBlock>
And so then I tried this:
<RichTextBlock FontSize="20">
<Paragraph Foreground="White" FontFamily="Segoe UI Light">
<Run>Now is the time for</Run>
<InlineUIContainer>
<TextBlock Margin="5,0,5,0" Tapped="TextBlock_Tapped_1">
<Underline><Run Text="all good men" /></Underline>
</TextBlock>
</InlineUIContainer>
<Run>to come to the aid of their country</Run>
</Paragraph>
</RichTextBlock>
This works like a charm!
I am not pretending it is not a little more work to implement your own hyperlink button but think of it this way - you will have 100% control over its layout! And it will easily inherit from the font styles around it!
Make sense?
For future readers just to add that windows 8.1 simplify this task, Windows 8.1 adds the Hyperlink element to the XAML text object model in the Windows.UI.Xaml.Documents namespace, so now we can simply use it like this :
<RichTextBlock>
<Paragraph FontSize="22">Please click on this <Hyperlink NavigateUri="http://www.link.com">link</Hyperlink>, thanks !</Paragraph>
</RichTextBlock>
and it looks like this :
I tried to resolve this as well and came up with the following:
<RichTextBlock HorizontalAlignment="Left" VerticalAlignment="Top">
<Paragraph xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" FontSize="12" FontFamily="Calibri" >
<Run FontFamily="Calibri" FontSize="24">A sentence with inline text</Run>
<InlineUIContainer>
<HyperlinkButton FontSize="24" Background="Gray" Foreground="Blue" Template="{StaticResource HyperlinkButtonControlTemplate1}" BorderThickness="0" RenderTransformOrigin="0.5,0.5" Padding="0" FontFamily="Calibri">
the link with g
</HyperlinkButton>
</InlineUIContainer>
<Run FontFamily="Calibri" FontSize="24">and some more text</Run>
</Paragraph>
and the Template as follows:
<ControlTemplate x:Key="HyperlinkButtonControlTemplate1" TargetType="HyperlinkButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
RenderTransformOrigin="0.5,0.5"
Margin="1,0"
HorizontalAlignment="Center"
VerticalAlignment="Bottom" >
<ContentPresenter.RenderTransform>
<CompositeTransform TranslateY="8"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
<Rectangle x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5" />
<Rectangle x:Name="FocusVisualBlack"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="0.5" />
</Grid>
</ControlTemplate>
The only caveat is that the <CompositeTransform TranslateY="8"/> must be set to 1/3 of the font size, in this case 8 since font size is 24. Not ideal, but it does produce the desired output.
Update:
or use the following, this was derived from looking at the Social Media Windows 8 Dashboard Sample at
http://code.msdn.microsoft.com/wpapps/Social-Media-Dashboard-135436da
<Paragraph xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" FontSize="12" FontFamily="Calibri" >
<Run FontFamily="Calibri" FontSize="16">A sentence with inline text</Run>
<Span>
<InlineUIContainer>
<HyperlinkButton FontSize="16" BorderThickness="0" Margin ="-10,-13" Foreground="Blue" FontFamily="Calibri">
the link with g
</HyperlinkButton>
</InlineUIContainer>
</Span>
<Run FontFamily="Calibri" FontSize="16">and some more text</Run>

How to animate appearing of an element

I have an question about Expression Blend 4.
I want to create a simple component appearing animation, when height of component changes from 0 to 100% and components below it are moving down to allocate required space.
My problem is that only static values in pixels allowed to create such type of animation. But I did not know height of my control (actually, it is textBox in which content and content length may vary), and I cannot set Height value of last keyframe to Auto.
What should I do to implement this task?
Thanks in advance.
I guess the easist way would be using the Fluid Layout.
In the below example I created a TextBlock and set its Visibility to Collpased. Then when the Show visual state is triggered, I set its Visibility to Visible. Normally you can't animate the Visibility but if you enable the Fluid Layout behavior (also remember to define a TransitionEffect), it will animate it for you automatically.
<UserControl
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:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" mc:Ignorable="d"
x:Class="transformanimation.MainPage"
Width="640" Height="480">
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:0.7" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.7" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2">
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:FadeTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Hide"/>
<VisualState x:Name="Show">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<Grid Margin="205,96,275,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="TextBlock" FontSize="26.667" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Fill="#FF767689" Stroke="Black" Grid.Row="1"/>
</Grid>
<Button Content="hide" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="63,19,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Hide"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="show" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="183,20,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Show"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</UserControl>
Of course if you don't want to use this magicial animation you can try animating its ScaleY. Something like this,
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
Hope this helps! :)

Change ChildWindow CloseButton image Silverlight 3

I'm modifying the default 'ChildWindow' style and I'd like to specify a different image than the 'X' that is there by default. I've tried various things, like hooking into the OnApplyTemplate and OnOpened, where I can gain programmatic access to the button, like this:
Button closeButton = this.GetTemplateChild("CloseButton") as Button;
Yet closeButton.Content is always null. I've tried setting this to my Image and it does get set, yet the UI still displays the default 'X'. I've called UpdateLayout() as well to no avail.
Is there a way to do this either programmatically or via XAML? I've copied the default style and have made changes that are affected, yet this is one change that has me stumped. Below is a snippet of the style XAML I've been working with:
<!-- Header with Title-->
<Border x:Name="Chrome" Width="Auto" CornerRadius="5,5,0,0" Background="{StaticResource ChildWindowHeaderBackgroundBrush}">
<Grid Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<ContentControl Content="{TemplateBinding Title}"
IsTabStop="False"
FontWeight="Bold"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="6,0,6,0"/>
<Button x:Name="CloseButton" Margin="0,5,0,5" Grid.Column="2" IsTabStop="False" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="14" Style="{StaticResource ButtonStyle}"/>
</Grid>
</Border>
I've added an Image to the Button via XAML and it still doesn't show up.
It's all handled via the style, in a ControlTemplate:
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled"/>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="mouseOverImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="normalImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="normalImage" Margin="0" Source="/img/status_unknown.png" Stretch="None" />
<Image x:Name="mouseOverImage" Margin="0" Source="/img/up.png" Stretch="None" Visibility="Collapsed" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>