I'm looking for xaml that can represent a loading icon, like vista does.
Visual Description:
Round ( about 1/3 inch in width )
lighter blue color
transparent center
gel button looking (rounded edges wtih a little shadow)
white spinner around the edge, to give the movement
light(er) sky blue / gel pack looking
I've found spinning rectangles, and we can create XAML that gives the illusion of spinning, but we're just drawing 12 parts of a clock, and animating each one individually.
Does it absolutely have to be full-XAML? For this kind of effects, transparent PNGs work just great. Simply stack the PNGs up in a Grid and animate some of them using RotateTransform and DoubleAnimation.
If your application does not have to zoom much, that will be the easiest way to do the trick.
Greetings,
Laurent
Here is a super simple spinner I created in SL that you could convert to WPF.
<UserControl x:Class="Spinner.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<UserControl.Resources>
<Storyboard x:Name="Animiation" RepeatBehavior="Forever">
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0" Duration="0:0:.25" Storyboard.TargetName="e1" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.125" Duration="0:0:.25" Storyboard.TargetName="e2" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.25" Duration="0:0:.25" Storyboard.TargetName="e3" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.375" Duration="0:0:.25" Storyboard.TargetName="e4" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.5" Duration="0:0:.25" Storyboard.TargetName="e5" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.625" Duration="0:0:.25" Storyboard.TargetName="e6" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.75" Duration="0:0:.25" Storyboard.TargetName="e7" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.825" Duration="0:0:.25" Storyboard.TargetName="e8" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid Width="100" Height="100" x:Name="gridSpinner">
<Ellipse x:Name="e1" Margin="40,80,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e2" Margin="12,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e3" Margin="0,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e4" Margin="12,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e5" Margin="40,0,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e6" Margin="68,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e7" Margin="80,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e8" Margin="68,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</Grid>
</UserControl>
#Joeln, Thank you I was able to convert this to WPF, and get what I needed, thank you.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard Name="beginThis">
<Storyboard x:Name="Animiation" RepeatBehavior="Forever">
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0" Duration="0:0:.25" Storyboard.TargetName="e1" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.125" Duration="0:0:.25" Storyboard.TargetName="e2" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.25" Duration="0:0:.25" Storyboard.TargetName="e3" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.375" Duration="0:0:.25" Storyboard.TargetName="e4" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.5" Duration="0:0:.25" Storyboard.TargetName="e5" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.625" Duration="0:0:.25" Storyboard.TargetName="e6" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.75" Duration="0:0:.25" Storyboard.TargetName="e7" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.825" Duration="0:0:.25" Storyboard.TargetName="e8" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
<Grid x:Name="LayoutRoot" Background="White">
<Grid Width="100" Height="100" x:Name="gridSpinner">
<Ellipse x:Name="e1" Margin="40,80,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e2" Margin="12,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e3" Margin="0,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e4" Margin="12,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e5" Margin="40,0,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e6" Margin="68,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e7" Margin="80,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e8" Margin="68,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</Grid>
</Page>
Related
Trying to implement two animation which will run forever but not getting idea how to do here are my findings which i was trying
<Grid Grid.Row="0" Background="#339FFE">
<Image Source="Assets\ic_nytra_logo.png" HorizontalAlignment="Left" Stretch="Fill" Width="84" Height="72"
Margin="10,0,0,0"/>
<Image Source="Assets\ic_setting.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="Uniform" Width="49" Height="49"
Margin="0,10,15,0"/>
</Grid>
<Grid x:Name="ImageGrid" Grid.Row="1">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Ellipse VerticalAlignment="Center" Margin="10,-266,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="147,-240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Ellipse VerticalAlignment="Center" Margin="245,-134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="285,2,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="254,134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="147,240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Ellipse VerticalAlignment="Center" Margin="10,286,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-130,252,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-239,146,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-266,10,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-232,-122,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-130,-238,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Image x:Name="ImageBlock" Source="Assets/ic_out_circle.png" HorizontalAlignment="Center" Stretch="Uniform" Width="230">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SpinAnimation">
<DoubleAnimation To="0" From="360" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetName="ImageGrid"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<Canvas x:Name="round_anima" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-120,10,0,130" >
<Image x:Name="round_anima1" Canvas.ZIndex="2" Source="Assets/ic_round_animation.png" Height="120" Width="120">
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SpinAnimation1">
<DoubleAnimation To="360" From="0" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetName="round_anima"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Canvas>
</Grid>
but the storyboard containing second animation is not working.Any reference or idea regarding this issue.one can refer for image in given postenter link description here
but the storyboard containing second animation is not working.Any reference or idea regarding this issue.
The second animation should target round_anima1(image) instead of round_anima(canvas), you are defining a PlaneProjection on an image, not on Canvas.
I guess you want to rotate the second image(round_anima1) anticlockwise. You are doing it correctly, but since the second image is inside of ImageGrid, it's also rotating with the ImageGrid. Thus the second animation looks like it's not working.
To fix the problem, change Storyboard.TargetName="round_anima" to Storyboard.TargetName="round_anima1" and change To value from 360 to 720:
<Image x:Name="round_anima1" Canvas.ZIndex="2" Source="Assets/profiler.jpeg" Height="120" Width="120">
<Image.Projection>
<PlaneProjection />
</Image.Projection>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SpinAnimation1">
<DoubleAnimation To="720" From="0" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetName="round_anima1"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
Here is the result:
I can't seem to find the default full style of for GridViewItem by using Edit a copy function in Blend.
The generated style gives me a GridViewItemPresenter and that's it, without any visual states or any other elements.
Anyone able to find the style of this GridViewItemPresenter anywhere?
You find the right code in the below url
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709915.aspx
I guess this is because by performance reasons you are not supposed to customize internals of GridViewItemPresenter too much (well, a part from the public properties from the page that #WinitWindowsPhone mentioned).
But.
As described on the same page from #WinitWindowsPhone:
When the GridView's ItemsPanel is not an ItemsWrapGrid (the default) or ItemsStackPanel, the following template is used to show the data items. This template uses a UIElement tree and visual states instead of a GridViewItemPresenter.
<!-- Style for Windows.UI.Xaml.Controls.GridViewItem -->
<Style TargetType="GridViewItem" x:Key="GridViewItemExpanded">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,2,2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Border x:Name="OuterContainer">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PointerOverBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
..... Cutting XAML here since it is too huge to post in full, please refer to source page for full source .......
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ReorderHintContent" Background="Transparent">
<Path x:Name="SelectingGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckSelectingThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,9.5,9.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
<Border x:Name="HintGlyphBorder"
Height="40"
Width="40"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Opacity="0"
Margin="4">
<Path x:Name="HintGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckHintThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
</Border>
<Border x:Name="ContentContainer">
<!-- This extra wrapper grid is necessary because rendertransforms set by the reorder hint animations
will be lost when ContentContainer becomes a LTE -->
<Grid x:Name="InnerDragContent">
<Rectangle x:Name="PointerOverBorder"
IsHitTestVisible="False"
Opacity="0"
Fill="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
Margin="1" />
<Rectangle x:Name="FocusVisual"
IsHitTestVisible="False"
Opacity="0"
StrokeThickness="2"
Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />
<Rectangle x:Name="SelectionBackground"
Margin="4"
Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
Opacity="0" />
<Border x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="4">
<Grid>
<ContentPresenter x:Name="contentPresenter"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
<!-- The 'Xg' text simulates the amount of space one line of text will occupy.
In the DataPlaceholder state, the Content is not loaded yet so we
approximate the size of the item using placeholder text. -->
<TextBlock x:Name="PlaceholderTextBlock"
Visibility="Collapsed"
Text="Xg"
Foreground="{x:Null}"
Margin="{TemplateBinding Padding}"
IsHitTestVisible="False"
AutomationProperties.AccessibilityView="Raw"/>
<Rectangle x:Name="PlaceholderRect"
Visibility="Collapsed"
Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
<Rectangle x:Name="MultiArrangeOverlayBackground"
IsHitTestVisible="False"
Opacity="0"
Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}" />
</Grid>
</Border>
<Rectangle x:Name="SelectedBorder"
IsHitTestVisible="False"
Opacity="0"
Stroke="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
StrokeThickness="{ThemeResource GridViewItemSelectedBorderThemeThickness}"
Margin="4"/>
<Border x:Name="SelectedCheckMarkOuter"
IsHitTestVisible="False"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="4">
<Grid x:Name="SelectedCheckMark" Opacity="0" Height="40" Width="40">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
</Grid>
</Border>
<TextBlock x:Name="MultiArrangeOverlayText"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
FontSize="26.667"
IsHitTestVisible="False"
Opacity="0"
TextWrapping="Wrap"
TextTrimming="WordEllipsis"
Margin="18,9,0,0"
AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So, if your items in GridView have not very complex XAML and you don't have a lots of them you probably could go with plain old WrapGrid as a GridView.ItemsPanel and use this alternate template above for GridView.ItemContainerStyle.
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>
I have a ScrollViewer :
<ScrollViewer Width="160"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Hidden"
Height="324" Canvas.Top="0"
BorderThickness="0" Padding="0">
<ListBox x:Name="Snapshots" SelectionChanged="Snapshots_SelectionChanged"
Padding="0" Background="#FFF0F0F0"
BorderBrush="{x:Null}" VerticalAlignment="Top"
SelectionMode="Single">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding imageSource}"
Margin="5" Stretch="UniformToFill"
Width="120" Opacity="0.2"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"
VerticalAlignment="Top" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</ScrollViewer>
How can I implement these features :
Change the opacity of the selected item (Image).
Change the default border style of the selected item (Image).
Change the ItemContainerStyle in your ListBox. Small sample from MSDN:
<Style x:Key="ItemContainerStyle" TargetType="ListBoxItem">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
...
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Opacity"
Duration="0" To=".75"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
...
</vsm:VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox ItemContainerStyle="{StaticResource ItemContainerStyle}"
x:Name="Snapshots"
SelectionChanged="Snapshots_SelectionChanged" Padding="0"
Background="#FFF0F0F0"
BorderBrush="{x:Null}"
VerticalAlignment="Top" SelectionMode="Single">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding imageSource}" Margin="5"
Stretch="UniformToFill" Width="120" Opacity="0.2"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"
VerticalAlignment="Top"
HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
Also you can do an animation with your border in Selected VisualState.
Thank you,
it is working now.
this is my style after updating :
<Style x:Key="ItemContainerStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageBorder" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Opacity="0.2"
Margin="{TemplateBinding Padding}" />
<Border BorderBrush="Black" BorderThickness="5" x:Name="ImageBorder" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and this is the listbox:
<ScrollViewer Width="160" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" Height="324" Canvas.Top="0" BorderThickness="0" Padding="0">
<ListBox ItemContainerStyle="{StaticResource ItemContainerStyle}" x:Name="ListBox_AcceptedPhotos" SelectionChanged="Snapshots_SelectionChanged" Padding="0" Background="#FFF0F0F0" BorderBrush="{x:Null}" VerticalAlignment="Top" SelectionMode="Single">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding imageSource}" Margin="5" Stretch="UniformToFill" Width="120" MouseLeftButtonUp="Image_MouseLeftButtonUp" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</ScrollViewer>
This is driving me nuts. I can't seem to get the data template within my ComboBox to stretch the width of the pulldown. What gives?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ComboBox x:Name="SearchesComboBox" HorizontalContentAlignment="Stretch" Width="150">
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
</Grid>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
I just confirmed the following works in WPF, moving the HorizontalContentAlignment up to the ComboBox:
<ComboBox x:Name="SearchesComboBox" HorizontalContentAlignment="Stretch" Width="150">
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
Let me know if this also fixes the problem in Silverlight. The issue as I was seeing it was the items in the drop-down were correctly sized, while the content that showed in the pull-down was not stretching.
Ok, after about a day of fiddling with it, I have a solution. I HATE it, but it works. Basically, I reflected into the System.Windows.dll for Silverlight, and I ripped out the default template for ListBoxItem (which ComboBoxItem uses).
It turns out that in that template, there is a ContentPresenter with the HorizontalAlignment hard-coded to Left. So, I ripped off the template, and added a TemplateBinding for HorizontalAlignment, so it can use whatever the HorizontalAlignment of ComboBoxItem is.
That being said, what follows is the working code. If ANYONE has a better way to do this, please tell me. I haven't checked yet if this is fixed in 3.0. I hope it is. It should really bind all the way from ComboBox.HorizontalContentAlignment.
<UserControl.Resources>
<Style x:Key="FixedComboBoxItem" TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
<Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ComboBox x:Name="SearchesComboBox" Width="150" ItemContainerStyle="{StaticResource FixedComboBoxItem}" HorizontalContentAlignment="Stretch">
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" >
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
</Grid>