Добавить элемент управления динамически, используя дизайн материала WPF - PullRequest
Новая
       12

Добавить элемент управления динамически, используя дизайн материала WPF

0 голосов
/ 10 ноября 2018

Я новичок в WPF. В одном из моих настольных приложений я хочу использовать Material Design. Я добавил пакет nuget MaterialDesign и успешно реализовал. Здесь у меня есть ситуация, когда мне нужно добавить кнопку или карту на моем нажатии кнопки. те полностью динамичны. Могу ли я динамически добавлять элементы управления дизайном материала из C #? Помогите мне с примером.

Заранее спасибо

Ответы [ 4 ]

0 голосов
/ 05 июня 2019

Вот как я это сделал. Приведенный ниже Xaml адаптирован из примеров GitHub пакета разработки материалов в XAML.

"smtx: XamlDisplay" взят из "ShowMeTheXaml", который также используется в демоверсии GitHub (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>

Тогда в коде позади или в другом месте, если вы используете MVVM. 

 private void ToggleProgressBarVisibility()
  {
     if (prgDisplay.Visibility == Visibility.Visible)
        prgDisplay.Visibility = Visibility.Hidden;
     else
        prgDisplay.Visibility = Visibility.Visible;
  }
0 голосов
/ 10 ноября 2018

Я взял ссылку со следующей ссылкой для решения с дизайном материала Как автоматически генерировать элементы управления WPF на основе файла XML? Я не знаю, является ли этот способ эффективным для использования в дизайне материалов или нет, но мне удается получить результат для контроля Карты. 

    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;

Если мы посмотрим внимательно, 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' вышеуказанные свойства не имеют смысла при подготовке нового динамического элемента управления.

Результат, который я получил от кода выше Динамическое управление конструкцией материала

0 голосов
/ 12 апреля 2019

Вы можете просто сделать это: 

Card card = new Card();
StackPanel stackPanel = new StackPanel { Orientation = Orientation.Vertical };
stackPanel.Children.Add(new Label { Content = "Test"});
card.Content = stackPanel;
0 голосов
/ 10 ноября 2018

Я полагаю, вы могли бы использовать Material Design In XAML . Обязательно ознакомьтесь с демонстрационным проектом . Содержит ответы на все вопросы об общем управлении.

ВАРИАНТ ОДИН.

Обычно вы используете "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>

Я предполагаю, что вы хорошо понимаете привязки, поэтому я не буду публиковать весь код конца.

ВАРИАНТ ВТОРОЙ

программно

Поскольку вы упомянули, что хотите сделать это программно, вы также можете просто сделать это:

Шаг 1 : создайте сетку и настройте макет для работы с ним. 

<Grid x:Name="grid_Main">

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

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

 </Grid>

Шаг 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
  }

Просто примечание об использовании материала дизайна. Вам нужно сослаться на библиотеку, прежде чем вы сможете использовать ее в своем представлении.

Как это:

Добавьте это к ресурсам вашего приложения. 

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

Добавьте эту ссылку в любое представление, для которого необходимо использовать элемент управления дизайном материала. 

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

Затем можно использовать элементы управления дизайном материала следующим образом. 

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