Saturday, July 28, 2012

DataGrid/Textbox Master/Detail in XAML

MainPage.xaml


    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Horizontal">
            <sdk:DataGrid Name="grid" Margin="10" AutoGenerateColumns="False">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Header="Name" Binding="{Binding Name}" />
                    <sdk:DataGridTextColumn Header="Age" Binding="{Binding Age}" />
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>


            <StackPanel>
                <sdk:DataGrid Name="gBooks" Margin="10" AutoGenerateColumns="False" DataContext="{Binding SelectedItem, ElementName=grid}" ItemsSource="{Binding Books}">
                    <sdk:DataGrid.Columns>
                        <sdk:DataGridTextColumn Header="Title" Binding="{Binding Title}" />
                        <sdk:DataGridTextColumn Header="Code" Binding="{Binding Code}" />
                    </sdk:DataGrid.Columns>
                </sdk:DataGrid>
                <StackPanel DataContext="{Binding SelectedItem, ElementName=grid}" Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}"  />
                    <CheckBox IsChecked="{Binding isMale}" />
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </Grid>







CodeBehind:


    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
            
        }


        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            grid.ItemsSource = GridData.GetData();
        }
    }


    public class GridData
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public bool isMale { get; set; }
        public IEnumerable<Book> Books { get; set; }


        public class Book
        {
            public string Title { get; set; }
            public string Code { get; set; }
        };


        public static ObservableCollection<GridData> GetData()
        {
            ObservableCollection<GridData> data = new ObservableCollection<GridData>
            {
                new GridData { Name = "John Doe", Age = 30, isMale = true, 
                    Books = new List<Book> {
                        new Book {Title = "suits", Code = "123"},
                        new Book {Title = "Condors 1", Code = "113"}
                    } 
                },
                new GridData { Name = "Jane Doe", Age = 32, isMale = false },
                new GridData { Name = "Jason Smith", Age = 54, isMale = true },
                new GridData { Name = "Kayli Jayne", Age = 25, isMale = false}
            };


            return data;
        }
    }

No comments:

Post a Comment