How do I generate XAML code programmatically?

Question

I need to add Tabs which contain Grid. Grid contains TextBoxes and Labels with alredy defined style. How can I programmatically generate XAML code (Tabs with already present elements)? Can I do this or I need to create each element, set it style and add to the TabItem? Here's a part of the code:

<TabItem Header="tabItem1" Name="tabItem1">
                <Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Top" DataContext="{Binding ElementName=tabControl1, Path=ActualWidth}" MinWidth="768" MinHeight="446">
                    <Grid.RowDefinitions>
                        <RowDefinition MinHeight="43" Height="*" />
                        <RowDefinition Height="*" MinHeight="45" />
                        <RowDefinition Height="*" MinHeight="435" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" MinWidth="100" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <TextBox Grid.Column="1" Height="27" Name="textBox1" VerticalAlignment="Top" Margin="11,6,0,0" HorizontalAlignment="Stretch" Width="Auto" FontSize="14" HorizontalContentAlignment="Stretch" MinWidth="141" FlowDirection="LeftToRight" />
                    <Label Content="Supplier" Height="27" Name="label2" VerticalAlignment="Top" FontSize="14" FontFamily="Tahoma" FontWeight="Bold" Margin="21,6,0,0" Width="Auto" IsEnabled="True" HorizontalAlignment="Stretch" Foreground="Black" Background="White" MinWidth="133" HorizontalContentAlignment="Stretch" />
                    <TextBox Grid.Column="1" Grid.Row="1" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,0,0" Name="textBox11" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
                    <Label Grid.Row="1" Content="Supplier Bank" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label3" VerticalAlignment="Top" Width="Auto" Background="White" MinWidth="133" />
                    <TextBox Grid.Column="1" Grid.Row="2" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,0,0" Name="textBox12" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
                    <Label Grid.Row="2" Content="Account Number" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label4" VerticalAlignment="Top" Background="White" MinWidth="133" />
                    <TextBox Grid.Column="4" FontSize="14" Height="27" Margin="11,6,20,0" Name="textBox2" VerticalAlignment="Top" HorizontalAlignment="Stretch" Width="Auto" DataContext="{Binding ElementName=grid1, Path=ActualWidth}" MinWidth="141" />
                    <Label Grid.Column="3" Content="Buyer" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label5" VerticalAlignment="Top" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Background="White" MinWidth="133" />
                    <TextBox Grid.Column="4" Grid.Row="1" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,20,0" Name="textBox3" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
                    <Label Grid.Column="3" Grid.Row="1" Content="Buyer Bank" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label6" VerticalAlignment="Top" Width="Auto" HorizontalAlignment="Stretch" Background="White" MinWidth="133" />
                    <TextBox Grid.Column="4" Grid.Row="2" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,20,0" Name="textBox4" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
                    <Label Grid.Column="3" Grid.Row="2" Content="Account Number" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label7" VerticalAlignment="Top" Width="Auto" HorizontalAlignment="Stretch" Background="White" MinWidth="133" />
                </Grid>
            </TabItem>

Are you trying to add xaml code programmatically by using a string? — lem2802, Jul 27 '15 at 15:43
`DataContext="{Binding ElementName=tabControl1, Path=ActualWidth}"`... What are you trying to do here? It makes no sense :/ — almulo, Jul 27 '15 at 15:43
You don't *"generate XAML [code] programatically"* in WPF, nor anything like that. Instead, you use proper XAML and DataBinding and DataTemplating. See my answer. — Federico Berasategui, Jul 27 '15 at 15:50
Thanks for head up, almulo. I just started to learn c# and XAML, can do some weird things) — Mrg Gek, Jul 27 '15 at 15:52
@MrgGek I guessed so, was just asking to see if we could clarify any doubt you had with how DataContext works :) — almulo, Jul 27 '15 at 15:53

score 2 · Accepted Answer · edited May 23 '17 at 12:33

2

Bind your TabControl.ItemsSource property to an ObservableCollection<SomeViewModel> and then use DataTemplates to define what each ViewModel will look like.

More details in this answer.

edited May 23 '17 at 12:33

Community

1
1

answered Jul 27 '15 at 15:48

Federico Berasategui

43,562
11
100
154

What pattern should I use if I want to use WPF with SQL database? – Mrg Gek Jul 28 '15 at 15:17
@MrgGek WPF has nothing to do with databases. It is a UI Framework. That said, WPF is best used with the MVVM pattern. – Federico Berasategui Jul 28 '15 at 15:45
So I can't pass data to database using WPF? Then what I need to use if I want to make enterprise application that is bind to database? – Mrg Gek Jul 28 '15 at 15:53
@MrgGek "enterprise application" is a broad term. If you want to work professionally, you'd better start reading about properly layered architecture, the UI is not responsible for doing anything to a database. For database access, the recommended method from Microsoft is to use Entity Framework, which of course is an ORM and has nothing to do with WPF nor any other UI Framework. – Federico Berasategui Jul 28 '15 at 16:00

score 1 · Answer 2 · answered Jul 27 '15 at 15:52

Do you NEED to do it programmatically?

It'd be better to have a collection of some class that could contain the information of each TabItem, bind the TabControl to that collection and set an ItemTemplate so every item shows up the same way.

For instance, you could have a class like this:

public class BankMovement
{
    public string Supplier { get; set; }
    public string SupplierBank { get; set; }
    // ... etc.
}

And in your viewmodel or code-behind, create a collection of that type.

public ObservableCollection<BankMovement> Movements { get; set; }

Movements = new ObservableCollection<BankMovement>();
Movements.Add(new BankMovement());
// add as many movements as you want

//tabControl1.ItemsSource = Movements;  You can do this through Binding in the XAML, preferably

Finally, in your XAML, bind the TabControl's ItemsSource to that collection, and set an ItemTemplate. Also, in the DataTemplate, bind the TextBoxes to the corresponding property of the BankMovement class:

<TabControl ItemsSource="{Binding Movements}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Top" MinWidth="768" MinHeight="446">
                <Grid.RowDefinitions>
                    <RowDefinition MinHeight="43" Height="*" />
                    <RowDefinition Height="*" MinHeight="45" />
                    <RowDefinition Height="*" MinHeight="435" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" MinWidth="100" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <TextBox Text="{Binding Supplier}" Grid.Column="1" Height="27" Name="textBox1" VerticalAlignment="Top" Margin="11,6,0,0" HorizontalAlignment="Stretch" Width="Auto" FontSize="14" HorizontalContentAlignment="Stretch" MinWidth="141" FlowDirection="LeftToRight" />
                <Label Content="Supplier" Height="27" Name="label2" VerticalAlignment="Top" FontSize="14" FontFamily="Tahoma" FontWeight="Bold" Margin="21,6,0,0" Width="Auto" IsEnabled="True" HorizontalAlignment="Stretch" Foreground="Black" Background="White" MinWidth="133" HorizontalContentAlignment="Stretch" />
                <TextBox Text="{Binding SupplierBank}" Grid.Column="1" Grid.Row="1" FontSize="14" Height="27" HorizontalAlignment="Stretch" Margin="11,6,0,0" Name="textBox11" VerticalAlignment="Top" Width="Auto" MinWidth="141" />
                <Label Grid.Row="1" Content="Supplier Bank" FontFamily="Tahoma" FontSize="14" FontWeight="Bold" Height="27" Margin="21,6,0,0" Name="label3" VerticalAlignment="Top" Width="Auto" Background="White" MinWidth="133" />
                <!-- etc. -->
            </Grid>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

How do I generate XAML code programmatically?

2 Answers2