Add control dynamically using material design WPF

Question

I am new in WPF. One of my desktop application I want to use Material Design. I added MaterialDesign nuget package and implemented successfully. Here I have a situation where I need to add a button or card on my button click. those are fully dynamic. Can I add material design controls dynamically from C#? Help me with example.

Thanks in advance

B.Spangenberg · Accepted Answer · 2018-11-10 11:23:48Z

I believe you might be using Material Design In XAML. Make sure to check out the demo project. It contains all the answers to common control usage.

OPTION ONE.

You would usually use the "ItemsControl" to load objects into view dynamically. The items control is linked to a items source in your back-end view model. The source should be of type ObservableCollection. When ever you feed items to this source, the ItemsControl will update and insert based on the template it's provided.

Below is a basic short example.

xaml

        <ItemsControl  ItemsSource="{Binding ItemsToLoad}" Grid.IsSharedSizeScope="True" Margin="12 0 12 0">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                       <Button>Hi</Button>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
        </ItemsControl>

I'm assuming you have a good understanding of bindings, so I wont be posting all the back end code.

OPTION TWO

programmatically

Seeing as you mentioned that you want to do it programmatically, you could also just do this:

Step 1 : Create a grid and set a layout for you to work with.

<Grid x:Name="grid_Main">

    <Grid.ColumnsDefinition>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnsDefinition>

    <Grid.RowDefinition>
        <RowDefinition/>
        <RowDefinition/>
     </Grid.RowDefinition>

 </Grid>

Step 2: Code behind.

  private void AddControlToGrid()
  {
        Button button = new Button();
        grid_Main.Children.Add(button );
        Grid.SetRow(button , 1); // 1 is row index
        Grid.SetColumn(button , 0);// 0 is column index
  }

Just a Note of the material design usage. You need to reference the lib before you can use it in your view.

Like this :

Add this to your application resources.

    <Application x:Class="demo_app.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:demo_app">
    <Application.Resources>
       <ResourceDictionary>
           <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
       </ResourceDictionary>
     </Application.Resources>
 </Application>

Add this ref to any view you need to use a material design control on.

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

You can then use material design controls like this.

<materialDesign:Card Width="200">
            <Grid>
               <!--Content-->
            </Grid>
</materialDesign:Card>

Thanks for the reply. I am sorry if I didn't made clear point in my question. I followed this link and got answer stackoverflow.com/questions/4990624/…

Nirav.Bhatt · Accepted Answer · 2018-11-10 14:45:58Z

I took reference with following link for a solution with material design. How to generate WPF controls automatically based on XML file? I don't know if this way is efficient for using in material design or not but I succeed in getting result for Card control.

    StackPanel stackPanel = new StackPanel();
    MaterialDesignThemes.Wpf.Card card = new MaterialDesignThemes.Wpf.Card();
    StringBuilder sb = new StringBuilder();

    //Create card
sb.Append(@"<materialDesign:Card xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' xmlns:materialDesign='http://materialdesigninxaml.net/winfx/xaml/themes' Background='#03a9f4' Foreground = '{DynamicResource PrimaryHueDarkForegroundBrush}' Padding = '0' Width = '200'> ");
sb.Append(@"<Grid><Grid.RowDefinitions><RowDefinition Height='Auto' /><RowDefinition Height = 'Auto' /><RowDefinition Height = 'Auto' /></Grid.RowDefinitions> ");
sb.Append(@"<TextBlock Grid.Row='0' Margin = '16 16 16 4' Style = '{StaticResource MaterialDesignHeadlineTextBlock}'> Call Jennifer </TextBlock><Separator Grid.Row = '1' Style = '{StaticResource MaterialDesignLightSeparator}' /><TextBlock Grid.Row = '2' Margin = '16 0 16 8' VerticalAlignment = 'Center' HorizontalAlignment = 'Left' Style = '{StaticResource MaterialDesignBody2TextBlock}'> March 19, 2016 </TextBlock>");
sb.Append(@"</Grid></materialDesign:Card>");

    card = (MaterialDesignThemes.Wpf.Card)XamlReader.Parse(sb.ToString());
    // Add created button to previously created container.
    stackPanel.Children.Add(card);
    this.Content = stackPanel;

If we look closely, xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' xmlns:materialDesign='http://materialdesigninxaml.net/winfx/xaml/themes' above properties are impotent to put when preparing new dynamic control.

Result I got from above code Dynamic Material design control

PythonNoob · Accepted Answer · 2019-04-12 18:49:32Z

0

You can simply do this:

Card card = new Card();
StackPanel stackPanel = new StackPanel { Orientation = Orientation.Vertical };
stackPanel.Children.Add(new Label { Content = "Test"});
card.Content = stackPanel;

answered Apr 12, 2019 at 18:49

PythonNoob

1,0721 gold badge9 silver badges15 bronze badges

Comments

ShanieMoonlight · Accepted Answer · 2019-06-05 18:24:35Z

Here's the way I did it. The below Xaml is adapted from the Material Design In XAML nuget package GitHub examples .

"smtx:XamlDisplay" is from the "ShowMeTheXaml" that's also used in the GitHub demo (https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/MainDemo.Wpf/Progress.xaml)

   <smtx:XamlDisplay x:Name="prgDisplay" Key="progress" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="12" Visibility="Hidden">
          <materialDesign:Card  UniformCornerRadius="99" Padding="4" Opacity="0.95" Background="{StaticResource BrushPrimaryLight}">
              <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" 
                             Value="50" IsIndeterminate="True"                                      
                             Foreground="{StaticResource BrushPrimaryDark}" 
                             Height="100" Width="100"/>
           </materialDesign:Card>
    </smtx:XamlDisplay>

Then in the code behind or elsewhere if you're using MVVM.

 private void ToggleProgressBarVisibility()
  {
     if (prgDisplay.Visibility == Visibility.Visible)
        prgDisplay.Visibility = Visibility.Hidden;
     else
        prgDisplay.Visibility = Visibility.Visible;
  }

Collectives™ on Stack Overflow

Add control dynamically using material design WPF

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related