locked
how to add custom png icon to empty appbarbutton ?

    Question

  • i had declared an appbarbuttonstyle to a button in my app bar, it is empty circled, now i want to add a custom icon to it & a label below it, how can i achieve this, i am developing windows 8 app not 8.1
    Saturday, August 02, 2014 3:42 PM

Answers

  • I will show you what I did:

            <Button Style="{StaticResource AppBarButtonStyle}"  HorizontalAlignment="Left" Height="115" Margin="501,224,0,0" VerticalAlignment="Top" Width="269">
                <Button.Content>
                    <Image Source="Assets/Logo.png"></Image>
                </Button.Content>
            </Button>

    In the style define section, I add a test word here:

                     <Grid x:Name="RootGrid" Width="100" Background="Transparent">
                            <StackPanel VerticalAlignment="Top" Margin="0,12,0,11">
                                <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">
                                    <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"/>
                                    <TextBlock x:Name="OutlineGlyph" Text="&#xE0A7;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>
                                    <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>
                                </Grid>
                                <TextBlock
                                    x:Name="TextLabel"
                                    Text="{TemplateBinding AutomationProperties.Name}"
                                    Foreground="{StaticResource AppBarItemForegroundThemeBrush}"
                                    Margin="0,0,2,0"
                                    FontSize="12"
                                    TextAlignment="Center"
                                    Width="88"
                                    MaxHeight="32"
                                    TextTrimming="WordEllipsis"
                                    Style="{StaticResource BasicTextStyle}"/>
                                <TextBlock Text="test"></TextBlock>
                            </StackPanel>
                            <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"/>

    Result:

    You can customize whatever you want here to rich your button.

    --James

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by kranthi88 Thursday, August 07, 2014 7:22 AM
    Tuesday, August 05, 2014 8:04 AM
    Moderator

All replies

  • Hi kranthi88,

    Sorry, I do not see window 8 app has AppBarButton control, the AppBarButton class is new feature in Windows 8.1. How could you use the AppbarButton in win8 app?

    If you are customizing the Button control, you should be able to append the image to the button content.

            <Button HorizontalAlignment="Left" Height="193" Margin="293,131,0,0" VerticalAlignment="Top" Width="349">
                <Button.Content>
                    <Image Source="Assets/Logo.png"></Image>
                </Button.Content>
            </Button>

    Or do I misunderstand something?

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, August 04, 2014 5:55 AM
    Moderator
  • jamles i declared an appbarbutton style to a button which resulted in a round app bar button with no icon in it & no label , i want to know a method to customize that.

    <Button Style="{StaticResource AppBarButtonStyle}"/> 
    Monday, August 04, 2014 3:29 PM
  • I will show you what I did:

            <Button Style="{StaticResource AppBarButtonStyle}"  HorizontalAlignment="Left" Height="115" Margin="501,224,0,0" VerticalAlignment="Top" Width="269">
                <Button.Content>
                    <Image Source="Assets/Logo.png"></Image>
                </Button.Content>
            </Button>

    In the style define section, I add a test word here:

                     <Grid x:Name="RootGrid" Width="100" Background="Transparent">
                            <StackPanel VerticalAlignment="Top" Margin="0,12,0,11">
                                <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">
                                    <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"/>
                                    <TextBlock x:Name="OutlineGlyph" Text="&#xE0A7;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>
                                    <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>
                                </Grid>
                                <TextBlock
                                    x:Name="TextLabel"
                                    Text="{TemplateBinding AutomationProperties.Name}"
                                    Foreground="{StaticResource AppBarItemForegroundThemeBrush}"
                                    Margin="0,0,2,0"
                                    FontSize="12"
                                    TextAlignment="Center"
                                    Width="88"
                                    MaxHeight="32"
                                    TextTrimming="WordEllipsis"
                                    Style="{StaticResource BasicTextStyle}"/>
                                <TextBlock Text="test"></TextBlock>
                            </StackPanel>
                            <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"/>

    Result:

    You can customize whatever you want here to rich your button.

    --James

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by kranthi88 Thursday, August 07, 2014 7:22 AM
    Tuesday, August 05, 2014 8:04 AM
    Moderator