开发者

Wrap panel: not able to show multiple buttons

开发者 https://www.devze.com 2023-02-01 10:12 出处:网络
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\">

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-->
    &l开发者_如何学Got;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


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.


set height and width Image inside StackPanels

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

精彩评论

暂无评论...
验证码 换一张
取 消