Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Column breaks in mulicolumn text in Windows 8 XAML

Here described how I can create multicolumn text with horizontal scroll in Windows 8 Metro style app. Is there way to add "column breaks" to get any title on the top of column, not in the middle (having in mind, that we don't know how many columns in each section):

enter image description here

like image 954
Mike Keskinov Avatar asked May 02 '12 13:05

Mike Keskinov


Video Answer


1 Answers

You could create an ItemsControl and make the RichTextColumns as a DataTemplate. Each columns are in a list that is bound to ItemsControl.

Here is XAML sample:

<ItemsControl x:Name="itemsControl">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- Content is allowed to flow across as many columns as needed -->
            <common:RichTextColumns x:Name="richTextColumns" Margin="25,20,25,20">
                <RichTextBlock x:Name="richTextBlock" Width="200" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
                    <Paragraph>
                        <Run FontSize="26.667" FontWeight="Light" Text="{Binding Title}"/>
                        <LineBreak/>
                        <LineBreak/>                                
                    </Paragraph>                            
                    <Paragraph>
                        <Run FontWeight="SemiLight" Text="{Binding Content}"/>
                    </Paragraph>
                </RichTextBlock>

                <!-- Additional columns are created from this template -->
                <common:RichTextColumns.ColumnTemplate>
                    <DataTemplate>
                        <RichTextBlockOverflow Width="200" Margin="80,0,0,0">
                            <RichTextBlockOverflow.RenderTransform>
                                <TranslateTransform X="-1" Y="4"/>
                            </RichTextBlockOverflow.RenderTransform>
                        </RichTextBlockOverflow>
                    </DataTemplate>
                </common:RichTextColumns.ColumnTemplate>
            </common:RichTextColumns>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Here is C# code-behind sample:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var samples = new List<SampleColumnData>
    {
        new SampleColumnData{
            Title = "Column1",
            Content = "Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood. Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law. I never spend much time in school but I taught ladies plenty. It's true I hire my body out for pay, hey hey. I've gotten burned over Cheryl Tiegs, blown up for Raquel Welch. But when I end up in the hay it's only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. 'Cause I'm the unknown stuntman that makes Eastwood look so fine. Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. "
        },
        new SampleColumnData{
            Title = "Column2",
            Content = "Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood. Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law. I never spend much time in school but I taught ladies plenty. It's true I hire my body out for pay, hey hey. I've gotten burned over Cheryl Tiegs, blown up for Raquel Welch. But when I end up in the hay it's only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. 'Cause I'm the unknown stuntman that makes Eastwood look so fine. Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. "
        },
        new SampleColumnData{
            Title = "Column3",
            Content = "Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood. Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law. I never spend much time in school but I taught ladies plenty. It's true I hire my body out for pay, hey hey. I've gotten burned over Cheryl Tiegs, blown up for Raquel Welch. But when I end up in the hay it's only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. 'Cause I'm the unknown stuntman that makes Eastwood look so fine. Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. "
        },
    };

    itemsControl.ItemsSource = samples;
}

And here is a screenshot: enter image description here

Hope this helps!

like image 69
kimsk Avatar answered Sep 22 '22 00:09

kimsk