Skip to content

Instantly share code, notes, and snippets.

@lambda125
Created October 13, 2012 12:36
Show Gist options
  • Save lambda125/3884509 to your computer and use it in GitHub Desktop.
Save lambda125/3884509 to your computer and use it in GitHub Desktop.
Vector path data for app bar buttons - the hard way
<Button Style="{Binding StyleKey, Converter={StaticResource KeyToResourceConverter}}"
AutomationProperties.Name="{Binding Label}"
Tag="{Binding Label}"
Command="{Binding Command}" />
<Button Style="{StaticResource PathBasedAppBarButtonStyle}"
AutomationProperties.Name="Wash" AutomationProperties.AutomationId="WashAppBarButton"
Content="M9.6803506,4.8474294C10.209365 ... 3.5652149,0z" />
<Style x:Key="GroupByAppBarButtonStyle"
BasedOn="{StaticResource AppBarButtonStyle}"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid"
Width="100"
Background="Transparent">
<StackPanel Margin="0,12,0,11" VerticalAlignment="Top" HorizontalAlignment="Center">
<Grid Width="40"
Height="40"
Margin="0,0,0,5"
HorizontalAlignment="Center">
<TextBlock x:Name="BackgroundGlyph"
Margin="-4,-19,0,0"
FontFamily="Segoe UI Symbol"
FontSize="53.333"
Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"
Text="&#xE0A8;" />
<TextBlock x:Name="OutlineGlyph"
Margin="-4,-19,0,0"
FontFamily="Segoe UI Symbol"
FontSize="53.333"
Text="&#xE0A7;" />
<Path x:Name="Content" Data="M7.0748272,6.25 L7.8320313,6.25 L7.8320313,8.3738747 L7.4128065,8.3738747 C6.4748321,8.3738756 5.8524942,8.5428753 5.5462003,8.8812809 C5.2394991,9.2196875 5.0859456,9.974906 5.0859456,11.146937 C5.0859456,13.510094 5.0367928,15.002656 4.9376736,15.624625 C4.7751832,16.589874 4.4981375,17.334126 4.1053171,17.856968 C3.7133095,18.379812 3.0978777,18.844563 2.259022,19.25 C3.2510245,19.665188 3.9704502,20.298531 4.4168921,21.150843 C4.8633347,22.002748 5.0859456,23.398624 5.0859456,25.337656 C5.0859456,27.095905 5.1042261,28.141998 5.1403799,28.475937 C5.212688,29.089375 5.3950844,29.517561 5.6879725,29.760904 C5.9808617,30.004654 6.5560765,30.12653 7.4128065,30.12653 L7.8320313,30.12653 L7.8320313,32.25 L7.0748272,32.25 C6.1908793,32.25 5.5506682,32.178093 5.1537862,32.033875 C4.5769458,31.826281 4.0988173,31.490313 3.7202148,31.025969 C3.3412066,30.56122 3.0954401,29.972967 2.9829154,29.260811 C2.8699849,28.548248 2.8090518,27.38028 2.8001134,25.756907 C2.7911768,24.13353 2.7144003,23.010654 2.5701904,22.388687 C2.4259806,21.766312 2.135123,21.27475 1.697618,20.914 C1.2601129,20.553656 0.69464725,20.363937 0,20.346062 L0,18.140938 C0.69464725,18.123062 1.2601129,17.935781 1.697618,17.5795 C2.135123,17.223219 2.4259806,16.734095 2.5701904,16.111719 C2.7144003,15.489344 2.7911768,14.425375 2.8001134,12.919001 C2.8090518,11.413032 2.8358619,10.421375 2.8813591,9.9432192 C2.9626045,9.1855621 3.1133137,8.5770006 3.3347075,8.1167183 C3.5552878,7.6568441 3.8282712,7.29 4.1528454,7.0145626 C4.4774199,6.7395315 4.8921762,6.5295 5.3975205,6.3852816 C5.7399697,6.2955003 6.2989359,6.25 7.0748272,6.25 z M13,0 L33,0 L33,5 L13,5 z M13,8 L33,8 L33,13 L13,13 z M13,16 L33,16 L33,21 L13,21 z M13,32 L33,32 L33,37 L13,37 z M13,24 L33,24 L33,29 L13,29 z"
Stretch="Fill" Fill="White" Width="18" Height="18"/>
<!--<Path x:Name="Content"
Data="M3.4749239,10.185359L8.9229882,10.234859 19.967267,10.332358 25.446634,10.379358C28.279866,10.405358,29.42838,11.828556,27.996263,13.544652L25.04693,17.077144C23.614612,18.790842,21.269584,21.596735,19.838367,23.310232L18.178247,25.296028 18.178247,36.790805C18.178247,37.590304,17.529739,38.236001,16.73293,38.236001L12.159376,38.236001C11.360566,38.236001,10.714759,37.590304,10.714759,36.790805L10.714759,25.527628 8.8499873,23.211232C7.4491003,21.471735,5.1546333,18.624142,3.7561772,16.884544L0.86943278,13.299853C-0.5353736,11.562956,0.64164034,10.159259,3.4749239,10.185359z M1.4140666,4.7150002L27.106696,4.7150002C27.8892,4.7150006 28.522001,5.3491311 28.522001,6.1291251 28.522001,6.9102194 27.8892,7.5430002 27.106696,7.5430002L1.4140666,7.5430002C0.63403553,7.5430002 2.682209E-07,6.9102194 0,6.1291251 2.682209E-07,5.3491311 0.63403553,4.7150006 1.4140666,4.7150002z M1.4140672,0L27.106696,0C27.8892,0 28.522001,0.63432217 28.522001,1.4156456 28.522001,2.1957951 27.8892,2.8300004 27.106696,2.8300004L1.4140672,2.8300004C0.63403553,2.8300004 2.682209E-07,2.1957951 0,1.4156456 2.682209E-07,0.63432217 0.63403553,0 1.4140672,0z"
Stretch="Fill" Fill="White" />-->
</Grid>
<TextBlock x:Name="TextLabel"
Width="88"
MaxHeight="32"
Margin="0,0,2,0"
FontSize="12"
Foreground="{StaticResource AppBarItemForegroundThemeBrush}"
Style="{StaticResource BasicTextStyle}"
Text="{TemplateBinding AutomationProperties.Name}"
TextAlignment="Center"
TextTrimming="WordEllipsis" />
</StackPanel>
<Rectangle x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Opacity="0"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
StrokeDashArray="1,1"
StrokeDashOffset="1.5"
StrokeEndLineCap="Square" />
<Rectangle x:Name="FocusVisualBlack"
IsHitTestVisible="False"
Opacity="0"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
StrokeDashArray="1,1"
StrokeDashOffset="0.5"
StrokeEndLineCap="Square" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape" />
<VisualState x:Name="Filled" />
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="60" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="60" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="GroupByAppBarButtonStyle"
BasedOn="{StaticResource PathBasedAppBarButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="M7.0748272,6.25 L7.8320313,6.25 L7.8320313,8.3738747 L7.4128065,8.3738747 C6.4748321,8.3738756 5.8524942,8.5428753 5.5462003,8.8812809 C5.2394991,9.2196875 5.0859456,9.974906 5.0859456,11.146937 C5.0859456,13.510094 5.0367928,15.002656 4.9376736,15.624625 C4.7751832,16.589874 4.4981375,17.334126 4.1053171,17.856968 C3.7133095,18.379812 3.0978777,18.844563 2.259022,19.25 C3.2510245,19.665188 3.9704502,20.298531 4.4168921,21.150843 C4.8633347,22.002748 5.0859456,23.398624 5.0859456,25.337656 C5.0859456,27.095905 5.1042261,28.141998 5.1403799,28.475937 C5.212688,29.089375 5.3950844,29.517561 5.6879725,29.760904 C5.9808617,30.004654 6.5560765,30.12653 7.4128065,30.12653 L7.8320313,30.12653 L7.8320313,32.25 L7.0748272,32.25 C6.1908793,32.25 5.5506682,32.178093 5.1537862,32.033875 C4.5769458,31.826281 4.0988173,31.490313 3.7202148,31.025969 C3.3412066,30.56122 3.0954401,29.972967 2.9829154,29.260811 C2.8699849,28.548248 2.8090518,27.38028 2.8001134,25.756907 C2.7911768,24.13353 2.7144003,23.010654 2.5701904,22.388687 C2.4259806,21.766312 2.135123,21.27475 1.697618,20.914 C1.2601129,20.553656 0.69464725,20.363937 0,20.346062 L0,18.140938 C0.69464725,18.123062 1.2601129,17.935781 1.697618,17.5795 C2.135123,17.223219 2.4259806,16.734095 2.5701904,16.111719 C2.7144003,15.489344 2.7911768,14.425375 2.8001134,12.919001 C2.8090518,11.413032 2.8358619,10.421375 2.8813591,9.9432192 C2.9626045,9.1855621 3.1133137,8.5770006 3.3347075,8.1167183 C3.5552878,7.6568441 3.8282712,7.29 4.1528454,7.0145626 C4.4774199,6.7395315 4.8921762,6.5295 5.3975205,6.3852816 C5.7399697,6.2955003 6.2989359,6.25 7.0748272,6.25 z M13,0 L33,0 L33,5 L13,5 z M13,8 L33,8 L33,13 L13,13 z M13,16 L33,16 L33,21 L13,21 z M13,32 L33,32 L33,37 L13,37 z M13,24 L33,24 L33,29 L13,29 z" />
</Style>
public class KeyToResourceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var resourceKey = value as string;
object resourceObject = null;
if (Application.Current != null)
Application.Current.Resources.TryGetValue(resourceKey, out resourceObject);
return resourceObject;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return string.Empty;
}
}
<Style x:Key="PathBasedAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Path Width="20" Height="20" Stretch="Uniform" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
[DebuggerDisplay("Action: {Label}")]
public class Action : IAction
{
public Action(string label, System.Action action, ActionScope scope = ActionScope.Context, string styleKey = null)
{
Init(label, scope, styleKey);
if (action == null)
throw new ArgumentNullException("action");
Command = new RelayCommand(action);
}
protected void Init(string label, ActionScope scope, string styleKey)
{
if (string.IsNullOrWhiteSpace(label))
throw new ArgumentException("label");
if (string.IsNullOrWhiteSpace(styleKey))
styleKey = "AppBarButtonStyle";
Label = label;
StyleKey = styleKey;
Scope = scope;
}
protected void ShowError(Exception ex, string message)
{
Logger.Warn("Error exporting all data: " + ex);
EventManager.Current.Publish(new ErrorMessage(message));
}
public ICommand Command { get; protected set; }
public object CommandParameter { get; set; }
public ActionScope Scope { get; protected set; }
public string StyleKey { get; protected set; }
public string Label { get; protected set; }
}
//....
//....
public class SomeViewModel
{
private readonly Action _groupByAction;
public SomeViewModel()
{
_groupByAction = new Action("group", ActionScope.Global, "GroupByAppBarButtonStyle");
}
public Action GroupByAction
{
get { return _groupByAction; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment