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

Question

I am not able to see all the three buttons.Only first button is visible.Following is the code:

 <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>

Can some one suggest what could be the problem

Answer 1

Then you need something like this:

<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>

Things to note:

• Top image had wrong Grid.Row . (It was 1 (second row), should be 0 (first row))
• To assign uniform height/width use WrapPanel's ItemHeight/ItemWidth property.
• Avoid using these ugly margins. Usually designer generates them. Make sure to clean them up.
• Avoid assigning explicit Height/Width to individual items.

Answer 2

在StackPanels内设置图像的高度和宽度

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