none
Windows 8 Metro 应用开发App Bar问题 RRS feed

  • 问题

  • 在我们添加App Bar时好多Button图标是我们可以选择style进行选择的,如果我想加入一个Button,它的图标是自己提供的图片文件时我应该怎样添加替换上去呢?
    2012年7月12日 11:28

答案

  • 你可以参考http://www.wintellect.com/CS/blogs/jlikness/archive/2012/03/06/windows-8-icons-segoe-ui-symbol.aspx

    感觉微软自带的字体够用了!如果还不行的话,那就自己写一个button吧!

    2012年7月13日 2:13
  • 如zzaiquo所说,在Segoe UI Symbol字体中选择你想要的图标,然后构建一个 Button style 即可作为你的AppBar的按钮,比如下面:

    我选择了 0x2741编码的符号 ❁

    然后设计一个style,并运用到我们AppBar上:

        <Page.BottomAppBar>
            <AppBar>
                <AppBar.Resources>
                    <Style x:Key="MyAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
                        <Setter Property="AutomationProperties.AutomationId" Value="MyAppBarButton"/>
                        <Setter Property="AutomationProperties.Name" Value="My Button"/>
                        <Setter Property="Content" Value="&#x2741;"/>
                    </Style>
                </AppBar.Resources>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="Edit" Style="{StaticResource MyAppBarButtonStyle}" Tag="MyButton"/>
                </StackPanel>
            </AppBar>
        </Page.BottomAppBar>

    如果觉得需要自定义的图片,你也可以在这个Style的Content Setter放置你自己的Image。

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月13日 5:15
    版主
  • AppBar的样式都是从 Common\StandardStyles.xaml中的 AppBarButtonStyle 扩展来的。

    我们可以修改这个样式,加入你要的Image和图片。

    或者,更直接点,直接使用这个样式,然后在button中放置Image:

                    <Button x:Name="Edit" Style="{StaticResource AppBarButtonStyle}"
                            AutomationProperties.Name="My Button" AutomationProperties.AutomationId="MyAppBarButton"
                            Tag="MyButton">
                        <Image Source="Assets/Logo.png"/>                
                    </Button>


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月16日 4:00
    版主

全部回复

  • 你可以参考http://www.wintellect.com/CS/blogs/jlikness/archive/2012/03/06/windows-8-icons-segoe-ui-symbol.aspx

    感觉微软自带的字体够用了!如果还不行的话,那就自己写一个button吧!

    2012年7月13日 2:13
  • 如zzaiquo所说,在Segoe UI Symbol字体中选择你想要的图标,然后构建一个 Button style 即可作为你的AppBar的按钮,比如下面:

    我选择了 0x2741编码的符号 ❁

    然后设计一个style,并运用到我们AppBar上:

        <Page.BottomAppBar>
            <AppBar>
                <AppBar.Resources>
                    <Style x:Key="MyAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
                        <Setter Property="AutomationProperties.AutomationId" Value="MyAppBarButton"/>
                        <Setter Property="AutomationProperties.Name" Value="My Button"/>
                        <Setter Property="Content" Value="&#x2741;"/>
                    </Style>
                </AppBar.Resources>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="Edit" Style="{StaticResource MyAppBarButtonStyle}" Tag="MyButton"/>
                </StackPanel>
            </AppBar>
        </Page.BottomAppBar>

    如果觉得需要自定义的图片,你也可以在这个Style的Content Setter放置你自己的Image。

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月13日 5:15
    版主
  • 谢谢~我自定义的图片放在项目文件中的image文件夹当中,我应该如何做呢?不是很明白在Content Setter放置自己的Image的意思。
    2012年7月14日 2:58
  • AppBar的样式都是从 Common\StandardStyles.xaml中的 AppBarButtonStyle 扩展来的。

    我们可以修改这个样式,加入你要的Image和图片。

    或者,更直接点,直接使用这个样式,然后在button中放置Image:

                    <Button x:Name="Edit" Style="{StaticResource AppBarButtonStyle}"
                            AutomationProperties.Name="My Button" AutomationProperties.AutomationId="MyAppBarButton"
                            Tag="MyButton">
                        <Image Source="Assets/Logo.png"/>                
                    </Button>


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月16日 4:00
    版主
  • 甚至你放置一个普通的按钮也是可以的。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月16日 4:00
    版主