Button Click event won't fire in WP8 - xaml

I have a layout like this.
<Grid Grid.Row="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="gridTestAd" Height="80" Margin="-12,0,-12,0" >
<StackPanel Orientation="Vertical" Tap="StackPanel_Tap">
<StackPanel.Background>
<ImageBrush ImageSource="/Assets/image.jpg" />
</StackPanel.Background>
</StackPanel>
<adduplex:AdControl x:Name="adDuplexAd" AppId="123456"/>
<Button Name="btnRemoveAd" Content="X" Height="40" Width="40" HorizontalAlignment="Right" VerticalAlignment="Top" Background="Red" BorderBrush="Red" Foreground="White" Template="{StaticResource RemoveAdsButtonStyle}" Margin="0,-20,6,0" Click="btnRemoveAd_Click" />
</Grid>
I have set a breakpointin the btnRemoveAd_Click event but when i tap the button, the click event will not fire. Originally i created a custom button using images but that did not work either. This button is slightly edited using Blend because its so small and content is not showing. But only changes to Margin of the original button. I have search for the reasons but did not find any and i cant figure it either. What may be the problem? Please help
Control Template for the button
<ControlTemplate x:Key="RemoveAdsButtonStyle" TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" GeneratedDuration="0:0:0.25" To="Pressed">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle1" StrokeThickness="0">
<Rectangle.Fill>
<ImageBrush Stretch="Fill" ImageSource="/Assets/img/close_small.png"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="rectangle" StrokeThickness="0" Opacity="0">
<Rectangle.Fill>
<ImageBrush Stretch="Fill" ImageSource="/Assets/img/close_small_presses.png"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</ControlTemplate>

Related

Is there a way to change the text displayed in a DatePicker? Instead of "Select a date", show something else?

I'd like to have the DatePicker prompt the user with a different message than "Select a date" for my DatePicker. Preferably I'd have a resx entry that would determine the value displayed, so is there a property of the DatePicker I can set to display a different opening message? I can deal with the resx portion of the problem myself, I just need help figuring out what property to set.
I've tried using datepicker.Text = "Enter a date", just as a test, but it does not display the string.
Here is the xaml markup for the DatePicker:
<DatePicker Height="28" HorizontalAlignment="Left" Margin="515,55.661,0,0" Name="dtpStartDate" VerticalAlignment="Top" Width="180" FontSize="16" Background="White" SelectedDateFormat="Short" TabIndex="20"/>
You could define an implicit DatePickerTextBox style where you hide the ContentControl named "PART_Watermark" and add a TextBlock with your custom text:
<DatePicker Height="28" HorizontalAlignment="Left" Margin="515,55.661,0,0" Name="dtpStartDate"
VerticalAlignment="Top" Width="180" FontSize="16" Background="White"
SelectedDateFormat="Short" TabIndex="20">
<DatePicker.Resources>
<Style TargetType="DatePickerTextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePickerTextBox}">
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement"/>
<ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="watermark_decorator"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WatermarkStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unwatermarked"/>
<VisualState x:Name="Watermarked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentElement"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Watermark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1" Padding="{TemplateBinding Padding}">
<Grid x:Name="WatermarkContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="1"/>
<Border x:Name="watermark_decorator" BorderBrush="#FFFFFFFF" BorderThickness="1">
<Grid>
<ContentControl x:Name="PART_Watermark" Focusable="False" IsHitTestVisible="False" Opacity="0" Padding="2" Visibility="Collapsed"/>
<TextBlock Text="custom..." />
</Grid>
</Border>
<ScrollViewer x:Name="PART_ContentHost" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Border x:Name="FocusVisual" BorderBrush="#FF45D6FA" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
To display the value of a resource that is defined in a .resx file, you can set the Text property of the TextBlock using the x:Static markup extension like this where "AppResources" is the name of the .resx file and "HelloWorld" is the name of the string resource in the file:
<TextBlock Text="{x:Static local:AppResources.HelloWorld}" />
The only problem is when I choose a date, the watermark stays and is overlaid by the date. Is there any way to fix this?
Good point. You could apply a Style to the TextBlock and use a DataTrigger to bind to the SelectedDate property of the DatePicker:
<TextBlock Text="{x:Static local:AppResources.HelloWorld}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedDate, RelativeSource={RelativeSource AncestorType=DatePicker}}"
Value="{x:Null}">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>

UWP VisualStates in UserControl

I am having a hard time understanding how to use the UWP VisualStateManager correctly. I have defined a UserControl containing some simple Visual States, Here is the XAML:
<UserControl
x:Class="BingSearch.Views.UserControls.VerticalsTabHeader"
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"
Margin="8 0 8 0"
mc:Ignorable="d" IsTabStop="False">
<UserControl.Resources>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="Minimal"
GeneratedDuration="0:0:0.2">
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
</VisualState>
<VisualState x:Name="Minimal">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BubbleGrid"
Storyboard.TargetProperty="Opacity" From="1" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</UserControl.Resources>
<StackPanel>
<Grid x:Name="BubbleGrid">
<Ellipse Width="60" Height="60" Fill="Black" Stroke="White" StrokeThickness="1" />
<FontIcon
HorizontalAlignment="Center"
VerticalAlignment="Center"
Glyph="{Binding Glyph}"
Foreground="White"
FontSize="26" />
</Grid>
</StackPanel>
</UserControl>
In my code behind, when I call VisualStateManager.GoToState(this, "Minimal", true);or VisualStateManager.GoToState(this, "Normal", true);, nothing happens. The return value of the calls are always false, and CommonStates.CurrentState is always null. It seems like my Visual States never got "hooked up" to the UserControl. Is this not the correct way to define Visual States for UserControls?
If you want to use the VisualStateManager correctly in the UserControl, you need to do the following two things:
First you need to wrap your VisualStateGroup inside the
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
After that you need to put the VisualStateManager to be the direct child of the Root control in the UserControl as following:
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="Minimal"
GeneratedDuration="0:0:0.2">
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
</VisualState>
<VisualState x:Name="Minimal">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BubbleGrid"
Storyboard.TargetProperty="Opacity" From="1" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="BubbleGrid">
<Ellipse Width="60" Height="60" Fill="Black" Stroke="White" StrokeThickness="1" />
<FontIcon
HorizontalAlignment="Center"
VerticalAlignment="Center"
Glyph="{Binding Glyph}"
Foreground="White"
FontSize="26" />
</Grid>
</StackPanel>
The result:

Center the Button Text Content in a universal app

I am trying to center the text Content of a Button in Center,in my universal app,but this is what I get:
and this is my code:
<StackPanel Orientation="Vertical" >
<Border VerticalAlignment="Center" Height="40" >
<Button Background="Transparent" Content="Resultats" FontSize="16" VerticalAlignment="Stretch" Foreground="#727271" x:Name="res" Style="{Binding Source={StaticResource ButtontopStyle}}" HorizontalAlignment="Stretch" Click="res_Click" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Height="40"/>
</Border>
<StackPanel x:Name="stackVisible" Orientation="Vertical" >
<Border Margin="0" >
<Button Background="Transparent" Content="Tous les résultats" FontSize="14" VerticalAlignment="Top" Foreground="#727271" Margin="0" x:Name="ttres" Style="{Binding Source={StaticResource ButtonMenuStyle}}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Padding="10" VerticalContentAlignment="Center" Height="40"/>
</Border>
<Border>
<Button Background="Transparent" Content="Recherches Avancées" FontSize="14" VerticalAlignment="Top" Foreground="#727271" Margin="0" x:Name="rechavan" HorizontalAlignment="Stretch" Style="{Binding Source={StaticResource ButtonMenuStyle}}" HorizontalContentAlignment="Left" Padding="10" VerticalContentAlignment="Center" Height="40"/>
</Border>
</StackPanel>
</StackPanel>
I tried to use VerticalContentAlignment="Center",but like you see,I didn't get the result that I want
thanks for help
my styles for buttons:
<Style x:Key="ButtonMenuStyle" TargetType="Button">
<Setter Property="Foreground" Value="#e6e6e6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="Border" Stroke="Transparent" Fill="Transparent" Margin="0"/>
<ContentPresenter x:Name="Content"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtontopStyle" TargetType="Button">
<Setter Property="Foreground" Value="#e6e6e6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" />
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="Button" Stroke="Transparent" Fill="Transparent" Margin="0"/>
<ContentPresenter x:Name="Content"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You're putting too much effort into it, and most likely the ButtonMenuStyle has something that messes up your layout. By default the content of a Button is vertically centered.
I've thrown out all your unnecessary alignments, unnecessary borders (and you could even remove the inner StackPanel as well). I've also changed the font size to 8 on one button to show multiple sizes to prove they're all aligned correctly.
<StackPanel Orientation="Vertical">
<Button Background="Transparent" Content="Resultats" FontSize="16" VerticalAlignment="Stretch" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40"/>
<StackPanel Orientation="Vertical" >
<Button Background="Transparent" Content="Tous les résultats" FontSize="14" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40"/>
<Button Background="Transparent" Content="Recherches Avancées" FontSize="8" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40" />
</StackPanel>
</StackPanel>
Edit: as you posted your styles, I looked into them. I'd strongly advise against using them (as they break several things), but if you really want to use them, you should change your ContentPresenter too:
<ContentPresenter x:Name="Content" VerticalContentAlignment="Center" Content="{TemplateBinding Content}"/>
If you want to modify the button control template, look at default template in following file (line 2147) for a starting point:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml

Individual ItemSize for LoopingSelectorItem

I am trying to use LoopingSelector from Windows phone toolkit.
The selector itself works fine but I'm having problems with the ItemSize on the individual items.
I dont have a single item that is the same size as the other so I would like to get every single item to only take the necessary space on the screen.
But I have been unable to get this behavior. Anyone have any feedback? I have attached the code in the bottom. I must miss something obvious here.
<Style TargetType="toolkitPrimitives:LoopingSelectorItem">
<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
<Setter Property="Padding" Value="6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="root" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="Expanded" GeneratedDuration="0:0:0.33" />
<VisualTransition From="Expanded" To="Normal" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkGray" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="Foreground" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="FontWeight" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.RenderTransform>
<TranslateTransform x:Name="Transform"/>
</Border.RenderTransform>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>
<Border x:Name="border" Opacity="0" BorderThickness="0" BorderBrush="{StaticResource PhoneSubtleBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<TextBlock x:Name="Text" TextWrapping="Wrap" Opacity="0.7" Text="{Binding Text}" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ContentControl>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<toolkitPrimitives:LoopingSelector x:Name="LoopingSelector" ItemMargin="10" ItemSize="430,120" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
I see that several VerticalAlignment values are set to "stretch". This will stretch the element vertically until it fills its parent. Try setting the Height property of those elements to "auto". The VerticalAlignment values should be either removed or set to anything but "stretch". Same goes for Width and HorizontalAlignment.
<Border.RenderTransform>
<TranslateTransform x:Name="Transform"/>
</Border.RenderTransform>
<Grid HorizontalAlignment="Stretch" Height="auto">
<Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>
<Border x:Name="border" Opacity="0" BorderThickness="0" BorderBrush="{StaticResource PhoneSubtleBrush}" Height="auto" HorizontalAlignment="Stretch">
<ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Height="auto" VerticalContentAlignment="Stretch">
<TextBlock x:Name="Text" TextWrapping="Wrap" Opacity="0.7" Text="{Binding Text}" Foreground="{StaticResource PhoneForegroundBrush}" Height="auto" HorizontalAlignment="Stretch" />
</ContentControl>
</Border>
</Grid>

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>