How do dynamically add columns based on bind data in grid view as data template

See more:

Windows

Windows-Phone-8

I have a list box.In that list box there is grid with textblock to show bind data.I want to add grid columns dynamically based on bind data.Here is my code.

<ScrollViewer x:Name="scrollViewer" Margin="130,0,0,0" Grid.Row="1"  VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Visible">
           <Grid  Background="White" Height="500" >
               <Grid.ColumnDefinitions>
                   <ColumnDefinition />
                   <ColumnDefinition Width="500" />
                   <ColumnDefinition Width="500" />
               </Grid.ColumnDefinitions>
               <Grid Grid.Column="0"  Height="500" Width="400" Margin="10,5,10,-105" VerticalAlignment="Top">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto"/>
                       <RowDefinition Height="*"/>
                   </Grid.RowDefinitions>
                   <StackPanel Grid.Row="0">
                       <StackPanel >
                           <TextBlock Text="{Binding Title}"  FontSize="22" FontFamily="Georgia,Times New Roman,Times,serif" Margin="25,5,0,0" TextWrapping="WrapWholeWords" MaxLines="2" FontWeight="Normal" TextTrimming="WordEllipsis"  />
                           <TextBlock Text="{Binding PubDate}" FontSize="15" Margin="25,0,0,0" TextWrapping="WrapWholeWords" MaxLines="2" TextTrimming="WordEllipsis" />
                       </StackPanel>
                       <Image Source="{Binding Image}" Height="250"  Width="380" Margin="20,10,10,10" Stretch="Fill" />
                   </StackPanel>
                   <TextBlock Text="{Binding Story}" FontSize="12" Margin="25,0,0,0" FontWeight="Light" Foreground="DimGray" Grid.Row="1" Style="{StaticResource BodyTextBlockStyle}" MaxLines="3" TextTrimming="WordEllipsis" />
               </Grid>
               <Grid Grid.Column="1" Margin="10,5,10,0" Background="White">
                   <ListBox x:Name="ItemsListBox" >
                       <ListBoxItem Margin="10" >
                           <TextBlock TextWrapping="Wrap" Text="{Binding Story}" FontSize="12" FontWeight="Light" />
                       </ListBoxItem>
                   </ListBox>
                   <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                   </Grid.RowDefinitions>
                   </Grid>
           </Grid>
       </ScrollViewer>

Here is my Json
{
"Groups":[
{
"Title":"TOP STORIES",
"Items":[
{
"title":"news",
"image":"images/dwarka-court-1_1443523436.jpg",
"story_id":"115272101",
"channel_slno":"521",
"story":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet tempus libero vitae feugiat. Proin justo velit, luctus ornare posuere eget, pulvinar ac nibh. Integer dapibus leo in metus volutpat blandit. Morbi facilisis laoreet magna iaculis porta. Donec quis ipsum et justo faucibus lacinia. Vivamus id sapien nec dolor venenatis hendrerit. Aenean sit amet pretium quam.",
"videoflag":0,
"related_article":[ ],
"version":"3"
}
]
}
]
}
In it story is very long. So I want if story is short so bind 4 rows of story in grid first column otherwise dynamically generate columns with bind other story data in textBlocks.