locked
AppBarButton: Setting a FontIcon from within a style

    Question

  • Hi everyone,

    I'm trying to set a FontIcon to a AppBarButton using a style:

        <Style TargetType="AppBarButton" x:Name="DealDecreaseValueButton">
            <Setter Property="Icon">
                <Setter.Value>
                    <FontIcon FontFamily="Segoe UI Symbol" FontSize="20" Glyph="&#xE1FD;" Margin="0,2,0,0" />
                </Setter.Value>
            </Setter>
       </Style>
    
    
    And
    
    <AppBarButton IsCompact="True" RequestedTheme="Dark" Margin="0,-6,0,0" Style="{StaticResource DealDecreaseValueButton}" />

    I can add the icon directly without a problem, however I get this exception when doing it via a style:

    XamlParseException: Failed to assign to property '%0'. [Line: 0 Position: 0]

    The reason I'm doing this from within a style is that I'm using the same linked view in two projects which requires customized icons.

    Anyone knows what's going wrong here?

    When I'm setting the Icon value directly from within the style it works fine, by the way, e.g.:

        <Style TargetType="AppBarButton" x:Name="DealDecreaseValueButton">
            <Setter Property="Icon" Value="Download" />
        </Style>
    

    Thanks in advance,

    Robert


    Changing the world... bit by bit.


    • Edited by enough2012 Thursday, August 07, 2014 8:50 AM
    Thursday, August 07, 2014 8:47 AM

Answers

  • Hi Enough2012,

    After some research, I find out the root cause is the ICON property is not a dependence property. We can only apply setters to dependence properties. So the code won’t work.

    To work around this issue, we can set a fonticon within a style for an app bar button. We can leverage the control template like the following code.

    <Style x:Key="AppBarButtonStyle1" TargetType="AppBarButton">
    
    <Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
    
                  <Setter Property="VerticalAlignment" Value="Top"/>
    
                  <Setter Property="HorizontalAlignment" Value="Left"/>
    
                  <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    
                  <Setter Property="FontWeight" Value="Normal"/>
    
                  <Setter Property="Template">
    
                         <Setter.Value>
    
                               <ControlTemplate TargetType="AppBarButton">
    
                                      <Grid x:Name="RootGrid" Background="Transparent" Width="100">
    
                                             <VisualStateManager.VisualStateGroups>
    
                                                    <VisualStateGroup x:Name="ApplicationViewStates">
    
                                                           <VisualState x:Name="FullSize"/>
    
                                                           <VisualState x:Name="Compact">
    
                                                                  <Storyboard>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TextLabel">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="RootGrid">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                    </VisualStateGroup>
    
                                                    <VisualStateGroup x:Name="CommonStates">
    
                                                           <VisualState x:Name="Normal"/>
    
                                                           <VisualState x:Name="PointerOver">
    
                                                                  <Storyboard>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverBackgroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                           <VisualState x:Name="Pressed">
    
                                                                  <Storyboard>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OutlineEllipse">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPressedForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                           <VisualState x:Name="Disabled">
    
                                                                  <Storyboard>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OutlineEllipse">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                    </VisualStateGroup>
    
                                                    <VisualStateGroup x:Name="FocusStates">
    
                                                           <VisualState x:Name="Focused">
    
                                                                  <Storyboard>
    
                                                                         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
    
                                                                         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                           <VisualState x:Name="Unfocused"/>
    
                                                           <VisualState x:Name="PointerFocused"/>
    
                                                    </VisualStateGroup>
    
                                             </VisualStateManager.VisualStateGroups>
    
                                             <StackPanel Margin="0,14,0,13" VerticalAlignment="Top">
    
                                                    <Grid HorizontalAlignment="Center" Height="40" Margin="0,0,0,5" Width="40">
    
                                                           <Ellipse x:Name="BackgroundEllipse" Fill="{ThemeResource AppBarItemBackgroundThemeBrush}" Height="40" UseLayoutRounding="False" Width="40"/>
    
                                                           <Ellipse x:Name="OutlineEllipse" Height="40" Stroke="{ThemeResource AppBarItemForegroundThemeBrush}" StrokeThickness="2" UseLayoutRounding="False" Width="40"/>
    
                                        <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    
                                             <ContentPresenter.Content>
    
                                                <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    
                                            </ContentPresenter.Content>
    
                                        </ContentPresenter>
    
                                    </Grid>
    
                                                                  
    
                                    <TextBlock x:Name="TextLabel" Foreground="{ThemeResource AppBarItemForegroundThemeBrush}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}" Width="88"/>
    
                                             </StackPanel>
    
                                             <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
    
                                             <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    
                                      </Grid>
    
                               </ControlTemplate>
    
                         </Setter.Value>
    
                  </Setter>
    
            </Style>
    

    Try it and let me know the result.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by enough2012 Friday, August 15, 2014 2:12 PM
    Tuesday, August 12, 2014 5:50 AM
    Moderator

All replies

  • The above error message is for Windows Phone, on Windows Store I get this message (which doesn't really help me neither):

    System.Runtime.InteropServices.COMException: Error HRESULT E_FAIL has been returned from a call to a COM component.
       at Windows.UI.Xaml.FrameworkElement.MeasureOverride(Size availableSize)

    This is a universal Windows app, by the way.


    Changing the world... bit by bit.

    Thursday, August 07, 2014 9:50 AM
  • Hi Enough2012,

    I can reproduce your issue on my side and the app works as your description. I think maybe you find a bug about setting icon property in Style. I’m trying to invite someone to come into this scenario to find what happens. Thank you for your contribution, this will help us to improve Windows Store App product.

    To work around this issue, I recommend you use code to add AppBarButton. Download the code sample from the following link. http://code.msdn.microsoft.com/XAML-AppBar-control-sample-2aa1cbb4.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, August 08, 2014 5:19 AM
    Moderator
  • Hi Enough2012,

    After some research, I find out the root cause is the ICON property is not a dependence property. We can only apply setters to dependence properties. So the code won’t work.

    To work around this issue, we can set a fonticon within a style for an app bar button. We can leverage the control template like the following code.

    <Style x:Key="AppBarButtonStyle1" TargetType="AppBarButton">
    
    <Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
    
                  <Setter Property="VerticalAlignment" Value="Top"/>
    
                  <Setter Property="HorizontalAlignment" Value="Left"/>
    
                  <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    
                  <Setter Property="FontWeight" Value="Normal"/>
    
                  <Setter Property="Template">
    
                         <Setter.Value>
    
                               <ControlTemplate TargetType="AppBarButton">
    
                                      <Grid x:Name="RootGrid" Background="Transparent" Width="100">
    
                                             <VisualStateManager.VisualStateGroups>
    
                                                    <VisualStateGroup x:Name="ApplicationViewStates">
    
                                                           <VisualState x:Name="FullSize"/>
    
                                                           <VisualState x:Name="Compact">
    
                                                                  <Storyboard>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TextLabel">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="RootGrid">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                    </VisualStateGroup>
    
                                                    <VisualStateGroup x:Name="CommonStates">
    
                                                           <VisualState x:Name="Normal"/>
    
                                                           <VisualState x:Name="PointerOver">
    
                                                                  <Storyboard>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverBackgroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                           <VisualState x:Name="Pressed">
    
                                                                  <Storyboard>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OutlineEllipse">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPressedForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                           <VisualState x:Name="Disabled">
    
                                                                  <Storyboard>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OutlineEllipse">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel">
    
                                                                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
    
                                                                         </ObjectAnimationUsingKeyFrames>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                    </VisualStateGroup>
    
                                                    <VisualStateGroup x:Name="FocusStates">
    
                                                           <VisualState x:Name="Focused">
    
                                                                  <Storyboard>
    
                                                                         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
    
                                                                         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
    
                                                                  </Storyboard>
    
                                                           </VisualState>
    
                                                           <VisualState x:Name="Unfocused"/>
    
                                                           <VisualState x:Name="PointerFocused"/>
    
                                                    </VisualStateGroup>
    
                                             </VisualStateManager.VisualStateGroups>
    
                                             <StackPanel Margin="0,14,0,13" VerticalAlignment="Top">
    
                                                    <Grid HorizontalAlignment="Center" Height="40" Margin="0,0,0,5" Width="40">
    
                                                           <Ellipse x:Name="BackgroundEllipse" Fill="{ThemeResource AppBarItemBackgroundThemeBrush}" Height="40" UseLayoutRounding="False" Width="40"/>
    
                                                           <Ellipse x:Name="OutlineEllipse" Height="40" Stroke="{ThemeResource AppBarItemForegroundThemeBrush}" StrokeThickness="2" UseLayoutRounding="False" Width="40"/>
    
                                        <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    
                                             <ContentPresenter.Content>
    
                                                <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    
                                            </ContentPresenter.Content>
    
                                        </ContentPresenter>
    
                                    </Grid>
    
                                                                  
    
                                    <TextBlock x:Name="TextLabel" Foreground="{ThemeResource AppBarItemForegroundThemeBrush}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}" Width="88"/>
    
                                             </StackPanel>
    
                                             <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
    
                                             <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    
                                      </Grid>
    
                               </ControlTemplate>
    
                         </Setter.Value>
    
                  </Setter>
    
            </Style>
    

    Try it and let me know the result.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by enough2012 Friday, August 15, 2014 2:12 PM
    Tuesday, August 12, 2014 5:50 AM
    Moderator
  • Hello Herro - many thanks - while this solution is more complex than I would like, it has the benefit that it is working!

    However, I now have the problem that I need to use platform-specific styles as well, as the given margins work fine for the Windows Store app, but on Windows Phone it results in a misaligned button. Any idea how to solve this better?

    Thanks,

      Robert


    Changing the world... bit by bit.

    Friday, August 15, 2014 4:04 PM