Search code examples
c#xamlwindows-phone-8data-bindinglonglistselector

Two longlistselectors or two columns of different data binding within longlistselector. Possible?


I am trying to figure out how to have two columns of different binded data on one page. The left column for sounds the right for a save ringtone task for each sound. I can't put two longlistselectors on one page, it wont let me.

Using a sample, its easy to see how to used binded data for the sound. And the great thing is you only have to enter new code into the binded items and it automatically populates each page with new sound tiles.

Id like to add a save ringtone tile that would essentially work the same way. But it would only make sense if I can get the save ringtone tiles next to the sound tiles on the same page.

Is there any way to do this? All I really need to know, I think, is how to get two columns of different data bindings onto the same page, hopefully in a longlistselector so it will scroll.

Here is a sample of the code im using now.


<phone:PhoneApplicationPage.Resources>    
    <DataTemplate x:Key="SoundTileDataTemplate">
    <Grid Background="{StaticResource PhoneAccentBrush}"
        Margin="0,0,135,0">
        <Grid VerticalAlignment="Top"
            HorizontalAlignment="right"
            Width="40"
            Height="40"
            Margin="0, 6, 6, 0">
            <Ellipse Stroke="{StaticResource PhoneForegroundBrush}"
                StrokeThickness="3"/>
            <Image Source="/Assets/AppBar/Play.png" />
        </Grid>
        <StackPanel VerticalAlignment="bottom">
            <TextBlock Text="{Binding Title}" 
                Margin="6,0,0,6"/>
        </StackPanel>
    </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->
    <phone:Pivot Title="{Binding Path=LocalizedResources.ApplicationTitle, 
        Source={StaticResource LocalizedStrings}}">
        <!--Pivot item one-->
        <phone:PivotItem Header="{Binding Animals.Title}">
            <!--Double line list with text wrapping-->
            <phone:LongListSelector Margin="0,0,-12,0" 
                ItemsSource="{Binding Animals.Items}"
                LayoutMode="List"
                ItemTemplate="{StaticResource SoundTileDataTemplate}"
                SelectionChanged="LongListSelector_SelectionChanged">
           </phone:LongListSelector>
        </phone:PivotItem>
    </phone:Pivot>
</Grid>

Solution

  • Easy solution.

         <DataTemplate x:Key="NewItemTemplate">
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" >
                <StackPanel Orientation="Horizontal" Width="56">
                    <CheckBox x:Name="CheckBox1" HorizontalAlignment="Left" IsChecked="{Binding Checked, Mode=TwoWay}" BorderBrush="Black" Style="{StaticResource CheckBoxStyleGrey1}" Width="90" Height="74" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" RenderTransformOrigin="0.5,0.5" Width="803" >
                    <StackPanel.RenderTransform>
                        <CompositeTransform ScaleX="-1"/>
                    </StackPanel.RenderTransform>
                    <TextBlock Text="{Binding lItem}" Foreground="Black" FontSize="45" Margin="-176,0,0,0" RenderTransformOrigin="0.5,0.5">
                        <TextBlock.RenderTransform>
                            <CompositeTransform ScaleX="-1"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                    <TextBlock Text="{Binding lCategory}" Foreground="Black" Margin="-146,0,-2,0" RenderTransformOrigin="0.5,0.5" >
                        <TextBlock.RenderTransform>
                            <CompositeTransform ScaleX="-1"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </StackPanel>
    
            </StackPanel>
        </DataTemplate>
    

    Edit the ItemTemplate based on your needs, and you might have to play around with it in blend if there is an error. In Blend, go to your long list selector and edit the item template.