使用材质设计WPF动态添加控件

2 回答

• 0

  我相信你可能正在使用Material Design In XAML . 一定要看看demo project . 它包含常见控件用法的所有答案 .

  OPTION ONE.

  您通常会使用“ItemsControl”动态地将对象加载到视图中 . 项目控件链接到后端视图模型中的项目源 . 源应为ObservableCollection类型 . 当您将项目提供给此源时，ItemsControl将根据其提供的模板进行更新和插入 .

  以下是一个基本的简短示例 .

  xaml

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

  我假设您对绑定有很好的理解，所以我不会发布所有后端代码 .

  OPTION TWO

  programmatically

  看到你提到你想以编程方式进行，你也可以这样做：

  Step 1 ：创建网格并设置布局供您使用 .

  <Grid x:Name="grid_Main">
  
      <Grid.ColumnsDefinition>
          <ColumnDefinition/>
          <ColumnDefinition/>
      </Grid.ColumnsDefinition>
  
      <Grid.RowDefinition>
          <RowDefinition/>
          <RowDefinition/>
       </Grid.RowDefinition>
  
   </Grid>
  

  Step 2: 代码背后 .

  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
    }
  

  只是注意材料设计的用法 . 您需要先引用lib，然后才能在视图中使用它 .

  像这样 ：

  将此添加到您的应用程序资源 .

  <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>
  

  将此ref添加到您需要使用材质设计控件的任何视图 .

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

  然后，您可以使用这样的材料设计控件 .

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

  回复于 2024-04-26T11:16:48+08:00
• 0

  我参考以下链接获得了材料设计的解决方案 . How to generate WPF controls automatically based on XML file?我不知道这种方式是否有效用于材料设计，但我成功获得了卡片控制的结果 .

  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;
  

  如果我们仔细观察，在准备新的动态控件时，上面的属性是无效的 .

  结果我从上面的代码Dynamic Material design control

  回复于 2024-04-26T11:16:48+08:00