none
Alternate between 2 datatemplates RRS feed

  • Question

  • Hello
    Im working on a Windows Phone 8 project, and i need to have a page with a list of items of the same class , but that are shown in 2 diferent ways

    they should alternate between 
    Image-Text
    Text-Image

    right now i have this

    <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot">
            <Grid.Background>
                <ImageBrush ImageSource="/Assets/Images/bkNews@2x.png"/>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <Grid.Resources>
                <DataTemplate x:Name="dataTemplate">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding img}"/>
                    </Grid>
                </DataTemplate>
            </Grid.Resources>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel Grid.Row="0" Margin="12,17,0,28"/>
            <Image HorizontalAlignment="Left" Margin="18.75,57.5,0,0" VerticalAlignment="Top" Source="/Assets/Images/logo@2x.png" Stretch="Fill" Grid.ColumnSpan="2" Width="221" Height="72"/>
            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Margin="0,38,0,0" Grid.Row="1" >
                <ItemsControl x:Name="items">
                    <ItemsControl.Resources>
                        
                    </ItemsControl.Resources>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
    
                            <Grid Height="218" VerticalAlignment="Top" Background="White" Width="440" Margin="0,0,0,5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
    
                                <Image Name="NewsImg" Source="{Binding img.path}" Stretch="Fill" Grid.Column="0"/>
                                <Grid Grid.Column="2">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="3*" />
                                    </Grid.RowDefinitions>
                                    <TextBlock TextAlignment="Right" Text="{Binding titulo}"  Foreground="Black" VerticalAlignment="Top" Height="39" Width="200" Margin="0,10,10,0" FontSize="28" FontFamily="Helvetica" HorizontalAlignment="Right"/>
                                    <TextBlock TextAlignment="Right" Grid.Row="1" Text="{Binding texto}" Foreground="Black" FontFamily="Helvetica" FontSize="18" TextWrapping="Wrap" Margin="22,0,8,0" Width="190"/>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
    
        </Grid>

    but with this all items are shown in the same format.
    How can i do an alternation using a datatemplate for Even items, and another for Odd items ?

    Tuesday, January 28, 2014 12:29 PM

Answers