Windows 8 Metro Style Apps - GridView's View Problem?

Question

0.00/5 (No votes)

See more:

Hello everybody, i'm trying to develop a tv show gallery but im stuck in gridview's view.

I'd like to show it like the picture at bottom;
http://i42.tinypic.com/n5hahz.png[^]

I've created a datatemplate but it shows on a single line not like the picture.

What steps should i do?

DataTemplate code;

HTML

<DataTemplate x:Key="ShowTemplate">
            <Grid HorizontalAlignment="Left" removed="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="344" Height="554">
                    <Grid Margin="0,10,0,0">
                        <Image HorizontalAlignment="Left" Height="450" Margin="10,10,0,-40" VerticalAlignment="Top" Width="324" Stretch="Fill" Source="Images/72233-3.jpg"/>
                        <TextBlock HorizontalAlignment="Center" Margin="10,465,10,10" TextWrapping="Wrap" Text="{Binding ShowName}" VerticalAlignment="Center" FontSize="30" TextAlignment="Center" FontWeight="Bold" Width="314" Height="62"  Foreground="{StaticResource ApplicationForegroundThemeBrush}" Style="{StaticResource ItemTitleStyle}"/>
                        <Image HorizontalAlignment="Left" Height="47" VerticalAlignment="Top" Width="100" Source="Images/badge.png"/>
                        <TextBlock HorizontalAlignment="Left" Margin="15,4,0,0" TextWrapping="Wrap" Text="{Binding Count}" VerticalAlignment="Top" Height="37" Width="61" FontWeight="Bold" FontSize="30" TextAlignment="Center" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Style="{StaticResource ItemSubtitleStyle}" />
                    </Grid>
            </Grid>
        </DataTemplate>
    </Page.Resources>

for gridview;

HTML

<StackPanel Grid.Row="1" Margin="10,10,0,0">
          <GridView x:Name="gridShows" removed="{StaticResource ApplicationPageBackgroundThemeBrush}"
          ItemTemplate="{StaticResource ShowTemplate}"
          BorderBrush="LightGray"
          VerticalAlignment="Top"
          BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="None"/>
      </StackPanel>

Posted 4-Jun-13 10:25am

Cüneyt Ayyıldız

Add a Solution

Comments

goodwillguy 5-Jun-13 11:59am

i dont quite get the problem. is it that you want to show the videos on a single grid and on mouse over it just pops out?

Cüneyt Ayyıldız 5-Jun-13 15:37pm

with my code;

<grid height="1000" margin="10" grid.row="1" width="Auto">
<gridview grid.row="1" name="GridV" itemssource="{Binding}">
<gridview.itemtemplate>
<datatemplate>
<grid height="487" width="299">
<Image HorizontalAlignment="Left" Height="397" VerticalAlignment="Top" Width="279" Margin="10,10,0,0" Source="{Binding Resim}" Stretch="UniformToFill"/>
<textblock textwrapping="Wrap" text="{Binding Isim}" margin="10,407,10,10" height="51" width="279" textalignment="Center" fontsize="26.667">

<gridview.itemcontainerstyle>
<Style TargetType="GridViewItem">
<setter property="HorizontalContentAlignment" value="Stretch">
<setter property="VerticalContentAlignment" value="Stretch">
<setter property="VariableSizedWrapGrid.RowSpan" value="{Binding ItemSize}">
<setter property="VariableSizedWrapGrid.ColumnSpan" value="{Binding ItemSize}">
</Style>

It's shown like this as a single line;
http://i.imgur.com/NvEPw0T.png

but it must be shown like this;
http://i.imgur.com/VBMJ47Q.png

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

goodwillguy · Answer 1 · 2013-06-04T11:26:00

Solution 1

As the pictures indicate show that on mouse over it has a size greater than the original size.

Hence, logically create a image control outside of the grid, and associate the image source to the relative source of the grid item.

I think that should work.

Posted 4-Jun-13 11:26am

goodwillguy

Comments

Cüneyt Ayyıldız 5-Jun-13 5:48am

It's drawn by paint not from xaml code. The question how can i make a view like the picture with xaml?