none
请问Appbar里按钮无法居中么?代码如下: RRS feed

  • 问题

  •     <common:LayoutAwarePage.BottomAppBar>
            <AppBar IsOpen="True" HorizontalAlignment="Center">           
                <StackPanel Width="1346" HorizontalAlignment="Center" Orientation="Horizontal">
                    <Button Content="&#x296F;" HorizontalAlignment="Center" VerticalAlignment="Stretch" Click="Button_Click_2" Style="{StaticResource MyAppBarBtnFilterStyle}" FontSize="30"/>
                </StackPanel>
            </AppBar>
        </common:LayoutAwarePage.BottomAppBar>

    请教高手,谢谢!

    2012年9月10日 4:27

答案

  • 不是在AppBar里面的button无法居中,是一个控件在横向排列的StackPanel中 是无法居中的。

    首先,StackPanel这个控件就是像Stack一样,将你的控件一个一个排列在一个无限制的面板中, 你现在把stackpanel的排列方向设置成了水平的,那么在这个方向的所有控件都是从左到右排列, 因此 也就不存在居中的概念了。

    你可以把StackPanel拿出来, 不用放在AppBar里面,居中也是没效果的,解决方案,上面提到的都可以, 比如设置margin,去掉StackPanel的Width属性,你也可以改变排列方向:

    <StackPanel Width="200"  Orientation="Vertical"  Background="Red">
        <Button Content="Test"  HorizontalAlignment="Center"/>
    </StackPanel>

    如果你设置 “Orientation="Vertical"”,那么 “HorizontalAlignment”是可以工作的, 反过来也一样。

    还有一个解决方案就是你别用StackPanel了,你可以尝试用Gird。


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • 已标记为答案 学习WIN8 2012年9月11日 8:20
    2012年9月11日 7:47

全部回复

  • 是希望Button按钮水平居中
    2012年9月10日 4:31
  • 如下修改即可:

    <common:LayoutAwarePage.BottomAppBar>
             <AppBar IsOpen="True" HorizontalContentAlignment="Center">            
                 <StackPanel Orientation="Horizontal">
                     <Button Content="&#x296F;"  Click="Button_Click_2" Style="{StaticResource MyAppBarBtnFilterStyle}" FontSize="30"/>
                 </StackPanel>
             </AppBar>
         </common:LayoutAwarePage.BottomAppBar>


    Thanks! Damon.Tian

    2012年9月10日 5:28
  • 如下修改即可:

    <common:LayoutAwarePage.BottomAppBar>
             <AppBar IsOpen="True" HorizontalContentAlignment="Center">            
                 <StackPanel Orientation="Horizontal">
                     <Button Content="&#x296F;"  Click="Button_Click_2" Style="{StaticResource MyAppBarBtnFilterStyle}" FontSize="30"/>
                 </StackPanel>
             </AppBar>
         </common:LayoutAwarePage.BottomAppBar>


    Thanks! Damon.Tian

    好像不行啊
    2012年9月10日 6:05
  • 我贴出来的代码都是本地测试过了。要居中设置AppBar的 HorizontalContentAlignment="Center"或者你的StackPanel的HorizontalAlignment="Center"都是可以的,你检查下你的MyAppBarBtnFilterStyle是否做有特别的样式,建议你先去掉MyAppBarBtnFilterStyle测试。


    Thanks! Damon.Tian

    2012年9月10日 6:25
  • 别忘了默认的AppBarButton 还会留有下面标签的空间。所以即使居中也是图标显示在中间偏上方。


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

    2012年9月10日 7:06
    版主
  • 无论我如何设置,都是这个效果。。

    2012年9月11日 3:33
  • 哦这是因为默认的AppBarButton Style 中 外面的圆和内容边距设定死的。所以你要调节,可以打开 Common\StandardStyles.xaml 找到 x:Key="AppBarButtonStyle" 的样式 ,你可以微调 BackgroundGlyph 和 OutlineGlyph的 Margin 为  Margin="-4,-17,0,0"  ,我测试,效果好一点。

     

     

     

     

     


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

    2012年9月11日 5:34
    版主
  • 这个真心是个bug, 在AppBar的panel里面的所有控件的Align都是有问题的, 无论是横向排列的panel还是纵向排列的panel,我看了一下style,我觉得是style写的有问题,我建议你直接在Button上面设置Margin属性的“left”的值去手动完成居中。

    这里不得不谈 要是在WPF中要有此类问题,直接OverridesDefaultStyle="True",但是metro就没有这个方法。


    Stay hungry, stay foolish

    2012年9月11日 6:12
  • 你是要我这种效果还是我理解错了?

    如果是下面的这种,使用我的给你的方式就可以。


    Thanks! Damon.Tian

    2012年9月11日 6:17
  • 你加上stackpanel的width 然后再试

    Stay hungry, stay foolish

    2012年9月11日 6:21
  • 不是在AppBar里面的button无法居中,是一个控件在横向排列的StackPanel中 是无法居中的。

    首先,StackPanel这个控件就是像Stack一样,将你的控件一个一个排列在一个无限制的面板中, 你现在把stackpanel的排列方向设置成了水平的,那么在这个方向的所有控件都是从左到右排列, 因此 也就不存在居中的概念了。

    你可以把StackPanel拿出来, 不用放在AppBar里面,居中也是没效果的,解决方案,上面提到的都可以, 比如设置margin,去掉StackPanel的Width属性,你也可以改变排列方向:

    <StackPanel Width="200"  Orientation="Vertical"  Background="Red">
        <Button Content="Test"  HorizontalAlignment="Center"/>
    </StackPanel>

    如果你设置 “Orientation="Vertical"”,那么 “HorizontalAlignment”是可以工作的, 反过来也一样。

    还有一个解决方案就是你别用StackPanel了,你可以尝试用Gird。


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • 已标记为答案 学习WIN8 2012年9月11日 8:20
    2012年9月11日 7:47
  • 不是在AppBar里面的button无法居中,是一个控件在横向排列的StackPanel中 是无法居中的。

    首先,StackPanel这个控件就是像Stack一样,将你的控件一个一个排列在一个无限制的面板中, 你现在把stackpanel的排列方向设置成了水平的,那么在这个方向的所有控件都是从左到右排列, 因此 也就不存在居中的概念了。

    你可以把StackPanel拿出来, 不用放在AppBar里面,居中也是没效果的,解决方案,上面提到的都可以, 比如设置margin,去掉StackPanel的Width属性,你也可以改变排列方向:

    <StackPanel Width="200"  Orientation="Vertical"  Background="Red">
        <Button Content="Test"  HorizontalAlignment="Center"/>
    </StackPanel>

    如果你设置 “Orientation="Vertical"”,那么 “HorizontalAlignment”是可以工作的, 反过来也一样。

    还有一个解决方案就是你别用StackPanel了,你可以尝试用Gird。


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    谢谢指点迷津! :)
    2012年9月11日 8:20