换行面板:无法显示多个按钮

时间:2010-12-23 06:28:50

标签: c# silverlight visual-studio-2010 windows-phone-7

我无法看到所有三个按钮。只有第一个按钮可见。以下是代码:

 <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->


    <Image Name="Title_image" Stretch="Uniform"  Source="Title.png" Margin="0,0,0,60" Grid.Row="1" Visibility="Visible" />

    <!--ContentPanel - place additional content here-->
    <toolkit:WrapPanel Name="empty" Orientation="Horizontal" Grid.Row="1"  >
        <Button  Margin="0,695,336,-13"  Click="On_PhotoClick" Height="83" Width="124">
            <StackPanel Orientation="Vertical">
                <Image Source="ic_right.png" Height="23" Width="53" />
                <TextBlock Text="  Photo" Height="27" FontSize="17" Width="67" />
            </StackPanel>
        </Button>
        <Button Margin="179,702,170,-13"  BorderBrush="#FF867F7F" Background="#009A8E8E" >
            <StackPanel Orientation="Vertical">
                <Image Source="icon_list_a.png"  />
                <TextBlock Text="  List" Height="33" FontSize="20" />
            </StackPanel>
        </Button>
        <Button  Margin="367,702,-12,-13" >
            <StackPanel Orientation="Vertical">
                <Image Source="icon_list_a.png" />
                <TextBlock Text="Information" Height="33"  FontSize="20"/>
            </StackPanel>
        </Button>
    </toolkit:WrapPanel>
</Grid>

有人可以提出可能存在的问题吗

2 个答案:

答案 0 :(得分:1)

然后你需要这样的东西:

<Grid x:Name="LayoutRoot"
      Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <!--TitlePanel contains the name of the application and page title-->
    <Image Name="Title_image"
           Stretch="Uniform"
           Source="Title.png"
           Grid.Row="0"
           Visibility="Visible" />
    <!--ContentPanel - place additional content here-->
    <toolkit:WrapPanel Name="empty"
                       Orientation="Horizontal"
                       Grid.Row="1"
                       ItemWidth="128"
                       ItemHeight="128">
        <Button Click="On_PhotoClick">
            <StackPanel Orientation="Vertical">
                <Image Source="ic_right.png" />
                <TextBlock Text="Photo"
                           FontSize="20" />
            </StackPanel>
        </Button>
        <Button>
            <StackPanel Orientation="Vertical">
                <Image Source="icon_list_a.png" />
                <TextBlock Text="  List"
                           FontSize="20" />
            </StackPanel>
        </Button>
        <Button>
            <StackPanel Orientation="Vertical">
                <Image Source="icon_list_a.png" />
                <TextBlock Text="Information"
                           FontSize="20" />
            </StackPanel>
        </Button>
    </toolkit:WrapPanel>
</Grid>

注意事项:

  • 顶部图片错误Grid.Row。 (它是1(第二行),应该是0(第一行))
  • 要指定统一的高度/宽度,请使用WrapPanel的ItemHeight / ItemWidth属性。
  • 避免使用这些丑陋的边距。通常设计师会生成它们一定要清理它们。
  • 避免为单个项目指定显式高度/宽度。

答案 1 :(得分:0)

在StackPanels中设置高度和宽度图像

<Image Source="ic_right.png" Height="23" Width="53" />