none
实现ie10的topappbar效果遇到的问题 RRS feed

  • 问题

  • 我想实现ie10的topappbar的效果,可是遇到点问题,希望得到帮助:

    ie10的效果如下图:

    //一个帖子只能两张图。这里就不发图了。metro版ie10的topappbar截图

    我的xaml代码如下:

        <Page.TopAppBar>
            <AppBar Background="CadetBlue">
                <Grid>
                    <GridView Margin="80,20,0,0"
                             ItemsSource="{Binding Source={StaticResource cvs3}}"
                              ItemClick="GridView_ItemClick_1"
                              IsItemClickEnabled="True">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Button Click="Button_Click_2" HorizontalAlignment="Right" VerticalAlignment="Top"  Style="{StaticResource DeleteAppBarButtonStyle}"/>
                                    <TextBlock Text="I am Label." VerticalAlignment="Bottom"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Width" Value="210"/>
                                <Setter Property="Height" Value="170"/>
                                <Setter Property="Background" Value="OrangeRed"/>
                            </Style>
                        </GridView.ItemContainerStyle>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                    <Button Style="{StaticResource AddAppBarButtonStyle}"  Click="Button_Click_1"  HorizontalAlignment="Right"/>
                </Grid>
            </AppBar>
        </Page.TopAppBar>

    得到的效果如下:

    我遇到的问题如下:

    1.

     <Button Click="Button_Click_2" HorizontalAlignment="Right" VerticalAlignment="Top"  Style="{StaticResource DeleteAppBarButtonStyle}"/>

    这句代码中的对齐为什么不起作用呢?我的按钮为什么会居中显示?

    2.如下图所示:

    我的鼠标位于描红的位置,可是却可以点击到Add按钮!为什么Add按钮的作用范围是一整列呢?

    3.我想点击delete按钮,就删除一个grid,可是我要如何获得当前点击的grid的索引呢?我只能获得ClickedItem。

    void TopAppBarDemo::BasicPage::GridView_ItemClick_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::ItemClickEventArgs^ e)
    {
    	int kkkk = 0;
    	if (bClicked)
    	{
    		bClicked = false;
    		m_items->RemoveAt(nIndex);//该如何获得正确的nIndex?
    	}
    }
    
    
    void TopAppBarDemo::BasicPage::Button_Click_2(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	Button^ __Btn = dynamic_cast<Button^>(e->OriginalSource);
    	if (__Btn)
    	{
    		bClicked = true;
    	}
    }
    期待你的答复。谢谢!

    2012年5月9日 1:09

答案

  • 比较花时间,我一个个来吧,清晰一点。

    1.

    你需要设置GridView的ItemContainer styley 的HorizontalContentAlignment属性和VerticalContentAlignment为Stretch:

      <Style TargetType="GridViewItem">
          <Setter Property="Width" Value="210"/>
          <Setter Property="Height" Value="170"/>
          <Setter Property="Background" Value="OrangeRed"/>
          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
          <Setter Property="VerticalContentAlignment" Value="Stretch"/>
      </Style>


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

    • 已标记为答案 frglig 2012年5月10日 7:16
    2012年5月10日 5:25
    版主
  • 2.

    加上  VerticalAlignment="Top", 否则按钮在的布局默认会把按钮的大小定为占满,你已经设置了 HorizontalAlignment="Right" 所以横向没有占满,但竖向依旧占满。


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

    • 已标记为答案 frglig 2012年5月10日 7:16
    2012年5月10日 5:28
    版主
  • 经过你的提醒找到解决办法了。如下:

    unsigned int __nIndex = 0;
    m_items->IndexOf(e->ClickedItem,&__nIndex);
    m_items->RemoveAt(__nIndex);

    2012年5月10日 7:16

全部回复

  • 比较花时间,我一个个来吧,清晰一点。

    1.

    你需要设置GridView的ItemContainer styley 的HorizontalContentAlignment属性和VerticalContentAlignment为Stretch:

      <Style TargetType="GridViewItem">
          <Setter Property="Width" Value="210"/>
          <Setter Property="Height" Value="170"/>
          <Setter Property="Background" Value="OrangeRed"/>
          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
          <Setter Property="VerticalContentAlignment" Value="Stretch"/>
      </Style>


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

    • 已标记为答案 frglig 2012年5月10日 7:16
    2012年5月10日 5:25
    版主
  • 2.

    加上  VerticalAlignment="Top", 否则按钮在的布局默认会把按钮的大小定为占满,你已经设置了 HorizontalAlignment="Right" 所以横向没有占满,但竖向依旧占满。


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

    • 已标记为答案 frglig 2012年5月10日 7:16
    2012年5月10日 5:28
    版主
  • 3.

    因为你是用了绑定,所以从GridView删除一个项,你只需要在你绑定的源中去remove他, 而不是在GridView->Items中删除。

    所以你可以从你绑定的源中Remove e.ClickedItem, ClickedItem的类型就是被绑定的每个项目对象。


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

    2012年5月10日 6:37
    版主
  • m_items就是源。
    
    Platform::Collections::Vector<Platform::Object^>^ m_items;
    
    <CollectionViewSource x:Name="cvs3"
                                  Source="{Binding Items}"
                                  IsSourceGrouped="False" />
    
    DefaultViewModel->Insert("Items",m_items);
    可是vector没有remove(object^)方法。


    2012年5月10日 7:09
  • 经过你的提醒找到解决办法了。如下:

    unsigned int __nIndex = 0;
    m_items->IndexOf(e->ClickedItem,&__nIndex);
    m_items->RemoveAt(__nIndex);

    2012年5月10日 7:16