Wednesday, August 15, 2012

howto: Column drag/Move functionality in itemscontrol similar to DataGrid in Silverlight

howto: Column drag/Move functionality in itemscontrol similar to DataGrid in Silverlight

We have a requirement to show vertical profiles of Data related to an entity, the profiles can change dynamically, so basically its a dynamic column grid, just that its not a Grid control, instead i have acheived this using ItemsControl and Listboxes.

Now i need to implement something similar to how the Grid behaves in column moving, i have to be able to move the Profile 6 next to Profile 1 to compare.

How can i achieve this ?

Below is my Xaml that renders the screen as shown below the code.

Header buttons are toggle buttons, so clicking on it selects the whole profile.

<ItemsControl x:Name="tStack" Grid.Column="0" ItemsSource="{Binding Profiles}">             <ItemsControl.ItemsPanel>                 <ItemsPanelTemplate>                     <StackPanel Orientation="Horizontal"/>                 </ItemsPanelTemplate>             </ItemsControl.ItemsPanel>             <ItemsControl.ItemTemplate>                 <DataTemplate>                         <Grid HorizontalAlignment="Left">                             <Grid.RowDefinitions>                                 <RowDefinition />                                 <RowDefinition />                             </Grid.RowDefinitions>                              <ToggleButton Grid.Row="0" x:Name="HeaderButton" Content="{Binding Name}"                                          Width="Auto" HorizontalAlignment="Stretch" Click="HeaderButton_Click" ClickMode="Press"/>                             <ListBox Grid.Row="1" Height="Auto" x:Name="listBox1" Width="Auto" HorizontalAlignment="Stretch"                                         ItemsSource="{Binding Path=Profile, Mode=TwoWay}" GotFocus="listBox1_GotFocus"                                         SelectionMode="Extended">                                 <ListBox.ItemTemplate>                                     <DataTemplate>                                         <TextBox Text="{Binding}" HorizontalAlignment="Stretch" BorderThickness="0"/>                                     </DataTemplate>                                 </ListBox.ItemTemplate>                                 <ItemsControl.ItemsPanel>                                     <ItemsPanelTemplate>                                         <StackPanel Orientation="Vertical"  VerticalAlignment="Top"  HorizontalAlignment="Stretch"/>                                     </ItemsPanelTemplate>                                 </ItemsControl.ItemsPanel>                             </ListBox>                         </Grid>                     </DataTemplate>             </ItemsControl.ItemTemplate>         </ItemsControl> 

enter image description here

Answers & Comments...




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog