locked
How to make separator in gridview

    Question

  • I want  to make a page like follows:

    The problem is how to make the separator (in the red Rectangle)? 

    Is there anyway to make it by XAML ?


    Ray_ni

    • Moved by Rob Caplan [MSFT]Microsoft employee, Owner Thursday, September 27, 2012 7:09 PM Xaml coding question, not a design question. Coinflip on the language since it wasn't specified (From:UI Design for Windows Store apps)
    Thursday, September 27, 2012 1:39 PM

Answers

  • Hi,

    You can use an image as the background of the border and set this border only show in the left.

    Contain these in a template. Please follow these codes.

            <GridView HorizontalAlignment="Left" Margin="268,297,0,0" VerticalAlignment="Top" Width="605" Height="274">
                <GridView.Template>
                    <DataTemplate>
                        <Border BorderThickness="10,0,0,0" >
                            <Border.Background>
                                <ImageBrush ImageSource="Assets/Logo.png"/>
                            </Border.Background>
                            <Image></Image>
                        </Border>
                    </DataTemplate>
                </GridView.Template>
            </GridView>

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Jesse Jiang Wednesday, October 3, 2012 2:12 AM
    Monday, October 1, 2012 6:42 AM

All replies

  • Well, any language will be OK, the XAML will be same.


    Ray_ni

    Friday, September 28, 2012 1:58 AM
  • Hi,

    You can use an image as the background of the border and set this border only show in the left.

    Contain these in a template. Please follow these codes.

            <GridView HorizontalAlignment="Left" Margin="268,297,0,0" VerticalAlignment="Top" Width="605" Height="274">
                <GridView.Template>
                    <DataTemplate>
                        <Border BorderThickness="10,0,0,0" >
                            <Border.Background>
                                <ImageBrush ImageSource="Assets/Logo.png"/>
                            </Border.Background>
                            <Image></Image>
                        </Border>
                    </DataTemplate>
                </GridView.Template>
            </GridView>

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Jesse Jiang Wednesday, October 3, 2012 2:12 AM
    Monday, October 1, 2012 6:42 AM
  • Jesse, Thanks for your help.

    Let me have a try.


    Ray_ni

    Wednesday, October 3, 2012 3:40 AM