/ src / modules / EnvironmentVariables / EnvironmentVariablesUILib / EnvironmentVariablesMainPage.xaml
EnvironmentVariablesMainPage.xaml
  1  <Page
  2      x:Class="EnvironmentVariablesUILib.EnvironmentVariablesMainPage"
  3      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5      xmlns:converters="using:EnvironmentVariablesUILib.Converters"
  6      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7      xmlns:i="using:Microsoft.Xaml.Interactivity"
  8      xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
  9      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 10      xmlns:models="using:EnvironmentVariablesUILib.Models"
 11      xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
 12      xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
 13      xmlns:ui="using:CommunityToolkit.WinUI"
 14      x:Name="RootPage"
 15      mc:Ignorable="d">
 16      <Page.Resources>
 17          <ResourceDictionary>
 18              <!--  These resource dictionaries are needed to reference styles part of SettingsControls  -->
 19              <ResourceDictionary.MergedDictionaries>
 20                  <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.SettingsControls/SettingsCard/SettingsCard.xaml" />
 21                  <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.SettingsControls/SettingsExpander/SettingsExpander.xaml" />
 22              </ResourceDictionary.MergedDictionaries>
 23  
 24              <x:Double x:Key="SecondaryTextFontSize">12</x:Double>
 25              <Style x:Key="SecondaryTextStyle" TargetType="TextBlock">
 26                  <Setter Property="FontSize" Value="{StaticResource SecondaryTextFontSize}" />
 27                  <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
 28              </Style>
 29  
 30              <DataTemplate x:Key="VariableTemplate" x:DataType="models:Variable">
 31                  <tkcontrols:SettingsCard
 32                      CommandParameter="{x:Bind (models:Variable)}"
 33                      IsActionIconVisible="False"
 34                      IsClickEnabled="False"
 35                      Style="{StaticResource DefaultSettingsExpanderItemStyle}">
 36                      <tkcontrols:SettingsCard.Header>
 37                          <StackPanel Orientation="Horizontal">
 38                              <TextBlock Text="{x:Bind Name, Mode=TwoWay}" />
 39                              <FontIcon
 40                                  Margin="6,0,6,0"
 41                                  FontSize="16"
 42                                  Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
 43                                  Glyph="&#xE930;"
 44                                  Visibility="{x:Bind IsAppliedFromProfile, Converter={StaticResource BoolToVisibilityConverter}}">
 45                                  <ToolTipService.ToolTip>
 46                                      <TextBlock x:Uid="VariableIsAppliedByActiveProfileTooltip" TextWrapping="Wrap" />
 47                                  </ToolTipService.ToolTip>
 48                              </FontIcon>
 49                          </StackPanel>
 50                      </tkcontrols:SettingsCard.Header>
 51                      <tkcontrols:SettingsCard.Description>
 52                          <StackPanel HorizontalAlignment="Left">
 53                              <ItemsControl
 54                                  x:Name="VariableValuesList"
 55                                  HorizontalAlignment="Left"
 56                                  ItemsSource="{x:Bind ValuesList, Mode=TwoWay}"
 57                                  Visibility="{x:Bind ShowAsList, Converter={StaticResource BoolToVisibilityConverter}}">
 58                                  <ItemsControl.ItemTemplate>
 59                                      <DataTemplate x:DataType="x:String">
 60                                          <TextBlock
 61                                              Margin="0,2,0,2"
 62                                              Foreground="{ThemeResource TextFillColorSecondaryBrush}"
 63                                              IsTextSelectionEnabled="True"
 64                                              Style="{StaticResource CaptionTextBlockStyle}"
 65                                              Text="{Binding Text}" />
 66                                      </DataTemplate>
 67                                  </ItemsControl.ItemTemplate>
 68                              </ItemsControl>
 69                              <TextBlock
 70                                  IsTextSelectionEnabled="True"
 71                                  Text="{x:Bind Values, Mode=TwoWay}"
 72                                  Visibility="{x:Bind ShowAsList, Converter={StaticResource BoolToInvertedVisibilityConverter}}" />
 73                          </StackPanel>
 74                      </tkcontrols:SettingsCard.Description>
 75                      <Button
 76                          Content="{ui:FontIcon Glyph=&#xE712;}"
 77                          IsEnabled="{x:Bind IsEditable}"
 78                          Style="{StaticResource SubtleButtonStyle}">
 79                          <Button.Flyout>
 80                              <MenuFlyout>
 81                                  <MenuFlyoutItem
 82                                      x:Uid="EditItem"
 83                                      Click="EditVariable_Click"
 84                                      CommandParameter="{x:Bind (models:Variable)}"
 85                                      Icon="{ui:FontIcon Glyph=&#xE70F;}" />
 86                                  <MenuFlyoutSeparator />
 87                                  <MenuFlyoutItem
 88                                      x:Uid="RemoveItem"
 89                                      Click="Delete_Variable_Click"
 90                                      CommandParameter="{x:Bind (models:Variable)}"
 91                                      Icon="{ui:FontIcon Glyph=&#xE74D;}" />
 92                              </MenuFlyout>
 93                          </Button.Flyout>
 94                          <ToolTipService.ToolTip>
 95                              <TextBlock x:Uid="More_Options_ButtonTooltip" TextWrapping="Wrap" />
 96                          </ToolTipService.ToolTip>
 97                      </Button>
 98                  </tkcontrols:SettingsCard>
 99              </DataTemplate>
100  
101              <converters:VariableTypeToGlyphConverter x:Key="VariableTypeToGlyphConverter" />
102              <converters:EnvironmentStateToBoolConverter x:Key="EnvironmentStateToBoolConverter" />
103              <converters:EnvironmentStateToMessageConverter x:Key="EnvironmentStateToMessageConverter" />
104              <converters:EnvironmentStateToTitleConverter x:Key="EnvironmentStateToTitleConverter" />
105              <converters:EnvironmentStateToVisibilityConverter x:Key="EnvironmentStateToVisibilityConverter" />
106  
107              <tkconverters:BoolToVisibilityConverter
108                  x:Key="BoolToInvertedVisibilityConverter"
109                  FalseValue="Visible"
110                  TrueValue="Collapsed" />
111              <tkconverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
112              <tkconverters:BoolNegationConverter x:Key="BoolNegationConverter" />
113          </ResourceDictionary>
114      </Page.Resources>
115  
116  
117      <Grid Margin="16" RowSpacing="8">
118          <Grid.RowDefinitions>
119  
120              <RowDefinition Height="Auto" />
121              <!--  buttons  -->
122              <RowDefinition Height="Auto" />
123              <!--  Warning messages  -->
124              <RowDefinition Height="*" />
125              <!--  content  -->
126              <RowDefinition Height="Auto" />
127              <!--  content  -->
128          </Grid.RowDefinitions>
129  
130          <!--  buttons  -->
131          <StackPanel Orientation="Horizontal">
132              <Button Command="{x:Bind NewProfileCommand}">
133                  <StackPanel Orientation="Horizontal" Spacing="8">
134                      <FontIcon
135                          x:Name="Icon"
136                          FontSize="16"
137                          Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
138                          Glyph="&#xe710;" />
139                      <TextBlock x:Uid="NewProfileBtn" />
140                  </StackPanel>
141                  <Button.KeyboardAccelerators>
142                      <KeyboardAccelerator Key="N" Modifiers="Control" />
143                  </Button.KeyboardAccelerators>
144              </Button>
145          </StackPanel>
146  
147          <Grid Grid.Row="1">
148              <InfoBar
149                  x:Name="InvalidStateInfoBar"
150                  x:Uid="InvalidStateInfoBar"
151                  Title="{x:Bind ViewModel.EnvironmentState, Mode=OneWay, Converter={StaticResource EnvironmentStateToTitleConverter}}"
152                  CloseButtonClick="InvalidStateInfoBar_CloseButtonClick"
153                  IsOpen="{x:Bind ViewModel.EnvironmentState, Mode=OneWay, Converter={StaticResource EnvironmentStateToBoolConverter}}"
154                  Message="{x:Bind ViewModel.EnvironmentState, Mode=OneWay, Converter={StaticResource EnvironmentStateToMessageConverter}}"
155                  Severity="Warning"
156                  Visibility="{x:Bind ViewModel.EnvironmentState, Mode=OneWay, Converter={StaticResource EnvironmentStateToVisibilityConverter}}">
157                  <InfoBar.ActionButton>
158                      <Button
159                          Click="ReloadButton_Click"
160                          Content="{ui:FontIcon Glyph=&#xe72c;}"
161                          Style="{StaticResource SubtleButtonStyle}"
162                          Visibility="{x:Bind ViewModel.IsInfoBarButtonVisible, Mode=OneWay}" />
163                  </InfoBar.ActionButton>
164              </InfoBar>
165          </Grid>
166  
167          <Grid
168              Grid.Row="2"
169              Margin="0,24,0,0"
170              ColumnSpacing="12">
171              <Grid.ColumnDefinitions>
172                  <!--  Left side  -->
173                  <ColumnDefinition Width="*" />
174                  <!--  GridSplitter  -->
175                  <ColumnDefinition Width="Auto" />
176                  <!--  Applied values  -->
177                  <ColumnDefinition Width="480" />
178              </Grid.ColumnDefinitions>
179              <ScrollViewer
180                  Grid.Row="1"
181                  Grid.Column="0"
182                  VerticalScrollBarVisibility="Auto">
183                  <StackPanel Spacing="4">
184                      <StackPanel Orientation="Horizontal" Spacing="8">
185                          <TextBlock x:Uid="ProfilesLbl" Style="{StaticResource BodyStrongTextBlockStyle}" />
186                          <FontIcon
187                              FontSize="16"
188                              Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
189                              Glyph="&#xE946;">
190                              <ToolTipService.ToolTip>
191                                  <TextBlock x:Uid="ProfilesDescriptionLbl" TextWrapping="Wrap" />
192                              </ToolTipService.ToolTip>
193                          </FontIcon>
194                      </StackPanel>
195                      <ItemsControl Margin="0,4,0,0" ItemsSource="{x:Bind ViewModel.Profiles, Mode=TwoWay}">
196                          <ItemsControl.ItemTemplate>
197                              <DataTemplate x:DataType="models:ProfileVariablesSet">
198                                  <tkcontrols:SettingsExpander
199                                      Margin="0,0,0,4"
200                                      Header="{x:Bind Name, Mode=TwoWay}"
201                                      HeaderIcon="{ui:FontIcon Glyph=&#xEDE3;}">
202                                      <tkcontrols:SettingsExpander.ItemsHeader>
203                                          <ItemsRepeater
204                                              ItemTemplate="{StaticResource VariableTemplate}"
205                                              ItemsSource="{x:Bind Variables, Mode=OneWay}"
206                                              TabFocusNavigation="Local"
207                                              VerticalCacheLength="10" />
208                                      </tkcontrols:SettingsExpander.ItemsHeader>
209  
210                                      <StackPanel Orientation="Horizontal" Spacing="12">
211                                          <ToggleSwitch
212                                              x:Uid="ToggleSwitch"
213                                              IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
214                                              Style="{StaticResource RightAlignedCompactToggleSwitchStyle}" />
215                                          <Button Content="{ui:FontIcon Glyph=&#xE712;}" Style="{StaticResource SubtleButtonStyle}">
216                                              <Button.Flyout>
217                                                  <MenuFlyout>
218                                                      <MenuFlyoutItem
219                                                          x:Uid="EditItem"
220                                                          Click="EditProfileBtn_Click"
221                                                          CommandParameter="{x:Bind (models:ProfileVariablesSet)}"
222                                                          Icon="{ui:FontIcon Glyph=&#xE70F;}" />
223                                                      <MenuFlyoutSeparator />
224                                                      <MenuFlyoutItem
225                                                          x:Uid="RemoveItem"
226                                                          Click="RemoveProfileBtn_Click"
227                                                          CommandParameter="{x:Bind (models:ProfileVariablesSet)}"
228                                                          Icon="{ui:FontIcon Glyph=&#xE74D;}" />
229                                                  </MenuFlyout>
230                                              </Button.Flyout>
231                                              <ToolTipService.ToolTip>
232                                                  <TextBlock x:Uid="More_Options_ButtonTooltip" TextWrapping="Wrap" />
233                                              </ToolTipService.ToolTip>
234                                          </Button>
235                                      </StackPanel>
236                                  </tkcontrols:SettingsExpander>
237                              </DataTemplate>
238                          </ItemsControl.ItemTemplate>
239                      </ItemsControl>
240  
241  
242                      <StackPanel
243                          Margin="0,24,0,0"
244                          Orientation="Horizontal"
245                          Spacing="8">
246                          <TextBlock x:Uid="DefaultVariablesLbl" Style="{StaticResource BodyStrongTextBlockStyle}" />
247                          <FontIcon
248                              FontSize="16"
249                              Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
250                              Glyph="&#xE946;">
251                              <ToolTipService.ToolTip>
252                                  <TextBlock x:Uid="DefaultVariablesDescriptionLbl" TextWrapping="Wrap" />
253                              </ToolTipService.ToolTip>
254                          </FontIcon>
255                      </StackPanel>
256  
257                      <tkcontrols:SettingsExpander
258                          Margin="0,4,0,0"
259                          Header="{x:Bind ViewModel.UserDefaultSet.Name}"
260                          HeaderIcon="{ui:FontIcon Glyph=&#xE77B;}">
261                          <tkcontrols:SettingsExpander.ItemsHeader>
262                              <ItemsRepeater
263                                  ItemTemplate="{StaticResource VariableTemplate}"
264                                  ItemsSource="{x:Bind ViewModel.UserDefaultSet.Variables, Mode=OneWay}"
265                                  TabFocusNavigation="Local"
266                                  VerticalCacheLength="10" />
267                          </tkcontrols:SettingsExpander.ItemsHeader>
268                          <StackPanel Orientation="Horizontal">
269                              <Button
270                                  x:Name="AddDefaultVariableUserBtn"
271                                  x:Uid="AddVariableContent"
272                                  Click="AddDefaultVariableBtn_Click"
273                                  CommandParameter="{x:Bind ViewModel.UserDefaultSet}"
274                                  Content="Add variable"
275                                  Style="{StaticResource AccentButtonStyle}">
276                                  <ToolTipService.ToolTip>
277                                      <TextBlock x:Uid="AddVariableTooltip" TextWrapping="Wrap" />
278                                  </ToolTipService.ToolTip>
279                              </Button>
280                          </StackPanel>
281                      </tkcontrols:SettingsExpander>
282  
283                      <tkcontrols:SettingsExpander Header="{x:Bind ViewModel.SystemDefaultSet.Name}" HeaderIcon="{ui:FontIcon Glyph=&#xE977;}">
284                          <tkcontrols:SettingsExpander.ItemsHeader>
285                              <ItemsRepeater
286                                  ItemTemplate="{StaticResource VariableTemplate}"
287                                  ItemsSource="{x:Bind ViewModel.SystemDefaultSet.Variables, Mode=OneWay}"
288                                  TabFocusNavigation="Local"
289                                  VerticalCacheLength="10" />
290                          </tkcontrols:SettingsExpander.ItemsHeader>
291                          <tkcontrols:SettingsExpander.Description>
292                              <StackPanel
293                                  Orientation="Horizontal"
294                                  Spacing="4"
295                                  Visibility="{x:Bind ViewModel.IsElevated, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
296                                  <Border
297                                      Width="12"
298                                      Height="12"
299                                      AutomationProperties.AccessibilityView="Raw"
300                                      Background="{ThemeResource AccentFillColorDefaultBrush}"
301                                      CornerRadius="12">
302                                      <FontIcon
303                                          FontSize="8"
304                                          Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
305                                          Glyph="&#xEA1F;" />
306                                  </Border>
307                                  <TextBlock x:Uid="EditSystemDefaultSetInfoBar" />
308                              </StackPanel>
309                          </tkcontrols:SettingsExpander.Description>
310                          <StackPanel Orientation="Horizontal">
311                              <Button
312                                  x:Name="AddDefaultVariableSystemBtn"
313                                  x:Uid="AddVariableContent"
314                                  Click="AddDefaultVariableBtn_Click"
315                                  CommandParameter="{x:Bind ViewModel.SystemDefaultSet}"
316                                  IsEnabled="{x:Bind ViewModel.IsElevated}"
317                                  Style="{StaticResource AccentButtonStyle}">
318                                  <ToolTipService.ToolTip>
319                                      <TextBlock x:Uid="AddVariableTooltip" TextWrapping="Wrap" />
320                                  </ToolTipService.ToolTip>
321                              </Button>
322                          </StackPanel>
323                      </tkcontrols:SettingsExpander>
324                  </StackPanel>
325              </ScrollViewer>
326              <tkcontrols:GridSplitter
327                  x:Name="Splitter"
328                  Grid.Row="2"
329                  Grid.Column="1"
330                  Width="8"
331                  Foreground="Transparent"
332                  ResizeBehavior="BasedOnAlignment"
333                  ResizeDirection="Auto" />
334  
335              <Grid
336                  x:Name="AppliedValuesPanel"
337                  Grid.Row="2"
338                  Grid.Column="2">
339                  <Grid.RowDefinitions>
340                      <RowDefinition Height="Auto" />
341                      <RowDefinition Height="*" />
342                  </Grid.RowDefinitions>
343                  <StackPanel Orientation="Horizontal" Spacing="8">
344                      <TextBlock x:Uid="AppliedVariablesLbl" Style="{StaticResource BodyStrongTextBlockStyle}" />
345                      <FontIcon
346                          FontSize="16"
347                          Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
348                          Glyph="&#xE946;">
349                          <ToolTipService.ToolTip>
350                              <TextBlock x:Uid="AppliedVariablesDescriptionLbl" TextWrapping="Wrap" />
351                          </ToolTipService.ToolTip>
352                      </FontIcon>
353                  </StackPanel>
354  
355                  <Grid
356                      Grid.Row="1"
357                      Margin="0,8,0,0"
358                      Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
359                      BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
360                      BorderThickness="1"
361                      CornerRadius="{ThemeResource ControlCornerRadius}">
362                      <ScrollViewer x:Name="AppliedVariablesScrollViewer" HorizontalScrollBarVisibility="Auto">
363                          <ItemsControl Margin="12,8,12,0" ItemsSource="{x:Bind ViewModel.AppliedVariables, Mode=TwoWay}">
364                              <ItemsControl.ItemTemplate>
365                                  <DataTemplate x:DataType="models:Variable">
366                                      <Grid Height="56" ColumnSpacing="12">
367                                          <Grid.ColumnDefinitions>
368                                              <ColumnDefinition Width="24" />
369                                              <ColumnDefinition />
370                                          </Grid.ColumnDefinitions>
371                                          <FontIcon
372                                              Grid.Column="0"
373                                              VerticalAlignment="Center"
374                                              FontSize="14"
375                                              Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
376                                              Glyph="{x:Bind ParentType, Mode=OneWay, Converter={StaticResource VariableTypeToGlyphConverter}}" />
377  
378                                          <StackPanel Grid.Column="1" VerticalAlignment="Center">
379                                              <TextBlock
380                                                  Text="{x:Bind Name}"
381                                                  TextTrimming="CharacterEllipsis"
382                                                  TextWrapping="NoWrap" />
383                                              <TextBlock
384                                                  Grid.Row="1"
385                                                  Foreground="{ThemeResource TextFillColorSecondaryBrush}"
386                                                  Style="{StaticResource CaptionTextBlockStyle}"
387                                                  Text="{x:Bind Values}"
388                                                  TextTrimming="CharacterEllipsis"
389                                                  TextWrapping="NoWrap">
390                                                  <ToolTipService.ToolTip>
391                                                      <TextBlock Text="{x:Bind Values}" TextWrapping="WrapWholeWords" />
392                                                  </ToolTipService.ToolTip>
393                                              </TextBlock>
394                                          </StackPanel>
395                                      </Grid>
396                                  </DataTemplate>
397                              </ItemsControl.ItemTemplate>
398                          </ItemsControl>
399                      </ScrollViewer>
400                  </Grid>
401              </Grid>
402          </Grid>
403  
404  
405          <ContentDialog
406              x:Name="AddDefaultVariableDialog"
407              x:Uid="AddDefaultVariableDialog"
408              IsPrimaryButtonEnabled="{Binding Valid, Mode=OneWay}"
409              IsSecondaryButtonEnabled="True"
410              PrimaryButtonStyle="{StaticResource AccentButtonStyle}">
411              <ContentDialog.DataContext>
412                  <models:Variable />
413              </ContentDialog.DataContext>
414              <ScrollViewer>
415                  <StackPanel
416                      MinWidth="320"
417                      HorizontalAlignment="Stretch"
418                      Spacing="16">
419                      <TextBox
420                          x:Uid="AddNewVariableName"
421                          IsSpellCheckEnabled="False"
422                          Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
423                          TextChanged="AddDefaultVariableNameTxtBox_TextChanged" />
424                      <TextBox
425                          x:Uid="AddNewVariableValue"
426                          AcceptsReturn="False"
427                          IsSpellCheckEnabled="False"
428                          ScrollViewer.IsVerticalRailEnabled="True"
429                          ScrollViewer.VerticalScrollBarVisibility="Visible"
430                          ScrollViewer.VerticalScrollMode="Enabled"
431                          Text="{Binding Values, Mode=TwoWay}"
432                          TextWrapping="Wrap" />
433                  </StackPanel>
434              </ScrollViewer>
435          </ContentDialog>
436  
437          <ContentDialog
438              x:Name="EditVariableDialog"
439              x:Uid="EditVariableDialog"
440              IsPrimaryButtonEnabled="{Binding Valid, Mode=OneWay}"
441              IsSecondaryButtonEnabled="True"
442              PrimaryButtonStyle="{StaticResource AccentButtonStyle}">
443              <ContentDialog.DataContext>
444                  <models:Variable />
445              </ContentDialog.DataContext>
446              <ScrollViewer>
447                  <StackPanel
448                      MinWidth="320"
449                      HorizontalAlignment="Stretch"
450                      Spacing="16">
451                      <TextBox
452                          x:Name="EditVariableDialogNameTxtBox"
453                          x:Uid="AddNewVariableName"
454                          IsSpellCheckEnabled="False"
455                          Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
456                          TextChanged="EditVariableDialogNameTxtBox_TextChanged" />
457                      <TextBox
458                          x:Name="EditVariableDialogValueTxtBox"
459                          x:Uid="AddNewVariableValue"
460                          AcceptsReturn="False"
461                          IsSpellCheckEnabled="False"
462                          ScrollViewer.IsVerticalRailEnabled="True"
463                          ScrollViewer.VerticalScrollBarVisibility="Visible"
464                          ScrollViewer.VerticalScrollMode="Enabled"
465                          Text="{Binding Values, Mode=TwoWay}"
466                          TextChanged="EditVariableDialogValueTxtBox_TextChanged"
467                          TextWrapping="Wrap" />
468                      <MenuFlyoutSeparator Visibility="{Binding ShowAsList, Converter={StaticResource BoolToVisibilityConverter}}" />
469                      <ItemsControl
470                          x:Name="EditVariableValuesList"
471                          Margin="0,-8,0,12"
472                          HorizontalAlignment="Stretch"
473                          ItemsSource="{Binding ValuesList, Mode=TwoWay}"
474                          Visibility="{Binding ShowAsList, Converter={StaticResource BoolToVisibilityConverter}}">
475                          <ItemsControl.ItemTemplate>
476                              <DataTemplate>
477                                  <Grid>
478                                      <Grid.ColumnDefinitions>
479                                          <ColumnDefinition Width="*" />
480                                          <ColumnDefinition Width="40" />
481                                      </Grid.ColumnDefinitions>
482                                      <TextBox
483                                          Background="Transparent"
484                                          BorderBrush="Transparent"
485                                          LostFocus="EditVariableValuesListTextBox_LostFocus"
486                                          Text="{Binding Text}" />
487                                      <Button
488                                          x:Uid="More_Options_Button"
489                                          Grid.Column="1"
490                                          VerticalAlignment="Center"
491                                          Content="&#xE712;"
492                                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
493                                          Style="{StaticResource SubtleButtonStyle}">
494                                          <Button.Flyout>
495                                              <MenuFlyout>
496                                                  <MenuFlyoutItem
497                                                      x:Uid="MoveUp"
498                                                      Click="ReorderButtonUp_Click"
499                                                      Icon="{ui:FontIcon Glyph=&#xE74A;}" />
500                                                  <MenuFlyoutItem
501                                                      x:Uid="MoveDown"
502                                                      Click="ReorderButtonDown_Click"
503                                                      Icon="{ui:FontIcon Glyph=&#xE74B;}" />
504                                                  <MenuFlyoutSeparator />
505                                                  <MenuFlyoutItem
506                                                      x:Uid="RemoveListItem"
507                                                      Click="RemoveListVariableButton_Click"
508                                                      Icon="{ui:FontIcon Glyph=&#xE74D;}" />
509                                                  <MenuFlyoutSeparator />
510                                                  <MenuFlyoutItem
511                                                      x:Uid="InsertListEntryBefore"
512                                                      Click="InsertListEntryBeforeButton_Click"
513                                                      Icon="{ui:FontIcon Glyph=&#xECC8;}" />
514                                                  <MenuFlyoutItem
515                                                      x:Uid="InsertListEntryAfter"
516                                                      Click="InsertListEntryAfterButton_Click"
517                                                      Icon="{ui:FontIcon Glyph=&#xECC8;}" />
518                                              </MenuFlyout>
519                                          </Button.Flyout>
520                                          <ToolTipService.ToolTip>
521                                              <TextBlock x:Uid="More_Options_ButtonTooltip" />
522                                          </ToolTipService.ToolTip>
523                                      </Button>
524                                  </Grid>
525                              </DataTemplate>
526                          </ItemsControl.ItemTemplate>
527                      </ItemsControl>
528                  </StackPanel>
529              </ScrollViewer>
530          </ContentDialog>
531  
532          <ContentDialog
533              x:Name="AddProfileDialog"
534              x:Uid="AddProfileDialog"
535              IsPrimaryButtonEnabled="{Binding Valid, Mode=OneWay}"
536              IsSecondaryButtonEnabled="True"
537              PrimaryButtonStyle="{StaticResource AccentButtonStyle}">
538              <ContentDialog.DataContext>
539                  <models:ProfileVariablesSet />
540              </ContentDialog.DataContext>
541              <ScrollViewer>
542                  <StackPanel
543                      MinWidth="360"
544                      HorizontalAlignment="Stretch"
545                      Spacing="12">
546                      <Grid ColumnSpacing="12">
547                          <Grid.ColumnDefinitions>
548                              <ColumnDefinition Width="*" />
549                              <ColumnDefinition Width="Auto" />
550                          </Grid.ColumnDefinitions>
551  
552                          <TextBox
553                              x:Uid="NewProfileNameTxtBox"
554                              HorizontalAlignment="Stretch"
555                              VerticalAlignment="Center"
556                              IsSpellCheckEnabled="False"
557                              Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
558                          <ToggleSwitch
559                              x:Uid="NewProfileEnabled"
560                              Grid.Column="1"
561                              MinWidth="0"
562                              Margin="0,0,0,0"
563                              VerticalAlignment="Center"
564                              IsOn="{Binding IsEnabled, Mode=TwoWay}"
565                              OffContent=""
566                              OnContent="" />
567                      </Grid>
568  
569                      <Grid>
570                          <Grid.ColumnDefinitions>
571                              <ColumnDefinition />
572                              <ColumnDefinition />
573                          </Grid.ColumnDefinitions>
574                          <Grid.RowDefinitions>
575                              <RowDefinition />
576                              <RowDefinition />
577                          </Grid.RowDefinitions>
578                          <TextBlock x:Uid="NewProfileVariablesListViewHeader" Margin="0,12,0,8" />
579                          <TextBlock
580                              x:Uid="NewProfileVariablesListViewApplyToSystemHeader"
581                              Grid.Column="1"
582                              Margin="0,12,0,8"
583                              HorizontalAlignment="Right"
584                              Visibility="Collapsed" />
585  
586                          <ItemsControl
587                              x:Name="NewProfileVariablesListView"
588                              Grid.Row="1"
589                              Grid.ColumnSpan="2"
590                              Margin="0,-8,0,12"
591                              HorizontalAlignment="Stretch"
592                              ItemsSource="{Binding Variables, Mode=TwoWay}">
593                              <ItemsControl.ItemTemplate>
594                                  <DataTemplate x:DataType="models:Variable">
595                                      <Grid Height="48" ColumnSpacing="8">
596                                          <Grid.ColumnDefinitions>
597                                              <ColumnDefinition />
598                                              <ColumnDefinition Width="40" />
599                                          </Grid.ColumnDefinitions>
600                                          <StackPanel VerticalAlignment="Center" Orientation="Vertical">
601                                              <TextBlock
602                                                  Text="{x:Bind Name}"
603                                                  TextTrimming="CharacterEllipsis"
604                                                  TextWrapping="NoWrap" />
605                                              <TextBlock
606                                                  Foreground="{ThemeResource TextFillColorSecondaryBrush}"
607                                                  Style="{StaticResource CaptionTextBlockStyle}"
608                                                  Text="{x:Bind Values}"
609                                                  TextTrimming="CharacterEllipsis"
610                                                  TextWrapping="NoWrap" />
611                                          </StackPanel>
612                                          <ToggleSwitch
613                                              x:Uid="ApplyAsSystemBtn"
614                                              Grid.Column="1"
615                                              IsOn="{x:Bind Path=ApplyToSystem, Mode=TwoWay}"
616                                              Visibility="Collapsed" />
617                                      </Grid>
618                                  </DataTemplate>
619                              </ItemsControl.ItemTemplate>
620                          </ItemsControl>
621  
622                      </Grid>
623  
624                      <Button>
625                          <StackPanel Orientation="Horizontal" Spacing="8">
626                              <FontIcon
627                                  x:Name="AddVariableIcon"
628                                  FontSize="16"
629                                  Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
630                                  Glyph="&#xe710;" />
631                              <TextBlock x:Uid="AddVariableBtn" />
632                          </StackPanel>
633                          <Button.Flyout>
634                              <Flyout
635                                  x:Name="AddVariableFlyout"
636                                  Closed="AddVariableFlyout_Closed"
637                                  Placement="Right"
638                                  ShouldConstrainToRootBounds="False">
639                                  <Grid Width="320" Height="480">
640                                      <Grid.RowDefinitions>
641                                          <RowDefinition Height="Auto" />
642                                          <RowDefinition Height="*" />
643                                          <RowDefinition Height="Auto" />
644                                      </Grid.RowDefinitions>
645  
646                                      <tkcontrols:Segmented
647                                          x:Name="SwitchViewsSegmentedView"
648                                          MaxWidth="500"
649                                          HorizontalAlignment="Stretch"
650                                          SelectionMode="Single">
651                                          <tkcontrols:SegmentedItem
652                                              x:Name="AddNewVariableSegmentedItem"
653                                              x:Uid="NewVariableSegmentedButton"
654                                              Tag="NewVariable" />
655                                          <tkcontrols:SegmentedItem
656                                              x:Name="AddExistingVariableSegmentedItem"
657                                              x:Uid="ExistingVariableSegmentedButton"
658                                              Tag="ExistingVariable" />
659                                      </tkcontrols:Segmented>
660  
661                                      <tkcontrols:SwitchPresenter
662                                          x:Name="AddVariableSwitchPresenter"
663                                          Grid.Row="1"
664                                          Value="{Binding SelectedItem.Tag, ElementName=SwitchViewsSegmentedView}">
665                                          <tkcontrols:Case Value="NewVariable">
666                                              <StackPanel Grid.Row="1" Orientation="Vertical">
667  
668                                                  <!--  Adding new variable  -->
669                                                  <TextBox
670                                                      x:Name="AddNewVariableName"
671                                                      x:Uid="AddNewVariableName"
672                                                      Margin="0,16,0,0"
673                                                      TextChanged="AddNewVariableName_TextChanged" />
674  
675                                                  <TextBox
676                                                      x:Name="AddNewVariableValue"
677                                                      x:Uid="AddNewVariableValue"
678                                                      Margin="0,16,0,0" />
679                                              </StackPanel>
680                                          </tkcontrols:Case>
681                                          <tkcontrols:Case Value="ExistingVariable">
682                                              <!--  Adding existing variables  -->
683                                              <ListView
684                                                  x:Name="ExistingVariablesListView"
685                                                  Grid.Row="1"
686                                                  Margin="-12,12,0,12"
687                                                  HorizontalAlignment="Stretch"
688                                                  ItemsSource="{x:Bind ViewModel.DefaultVariables.Variables, Mode=OneWay}"
689                                                  Loaded="ExistingVariablesListView_Loaded"
690                                                  SelectionChanged="ExistingVariablesListView_SelectionChanged"
691                                                  SelectionMode="Multiple">
692  
693                                                  <ListView.ItemTemplate>
694                                                      <DataTemplate x:DataType="models:Variable">
695                                                          <Grid Height="48" ColumnSpacing="8">
696                                                              <Grid.ColumnDefinitions>
697                                                                  <ColumnDefinition Width="20" />
698                                                                  <ColumnDefinition />
699                                                              </Grid.ColumnDefinitions>
700                                                              <FontIcon
701                                                                  Grid.Column="0"
702                                                                  VerticalAlignment="Center"
703                                                                  FontSize="14"
704                                                                  Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
705                                                                  Glyph="{x:Bind ParentType, Mode=OneWay, Converter={StaticResource VariableTypeToGlyphConverter}}" />
706                                                              <StackPanel
707                                                                  Grid.Column="1"
708                                                                  VerticalAlignment="Center"
709                                                                  Orientation="Vertical">
710                                                                  <TextBlock
711                                                                      Text="{x:Bind Name}"
712                                                                      TextTrimming="CharacterEllipsis"
713                                                                      TextWrapping="NoWrap" />
714                                                                  <TextBlock
715                                                                      Foreground="{ThemeResource TextFillColorSecondaryBrush}"
716                                                                      Style="{StaticResource CaptionTextBlockStyle}"
717                                                                      Text="{x:Bind Values}"
718                                                                      TextTrimming="CharacterEllipsis"
719                                                                      TextWrapping="NoWrap" />
720                                                              </StackPanel>
721                                                          </Grid>
722                                                      </DataTemplate>
723                                                  </ListView.ItemTemplate>
724                                              </ListView>
725  
726                                          </tkcontrols:Case>
727                                      </tkcontrols:SwitchPresenter>
728                                      <Grid Grid.Row="2" HorizontalAlignment="Stretch">
729                                          <Grid.ColumnDefinitions>
730                                              <ColumnDefinition Width="*" />
731                                              <ColumnDefinition Width="*" />
732                                          </Grid.ColumnDefinitions>
733  
734                                          <Button
735                                              x:Name="ConfirmAddVariableBtn"
736                                              x:Uid="ConfirmAddVariableBtn"
737                                              Margin="4,0,4,0"
738                                              HorizontalAlignment="Stretch"
739                                              Command="{x:Bind AddVariableCommand}"
740                                              IsEnabled="False"
741                                              Style="{StaticResource AccentButtonStyle}" />
742  
743                                          <Button
744                                              x:Name="CancelAddVariableBtn"
745                                              x:Uid="CancelAddVariableBtn"
746                                              Grid.Column="1"
747                                              Margin="4,0,4,0"
748                                              HorizontalAlignment="Stretch"
749                                              Command="{x:Bind CancelAddVariableCommand}" />
750  
751                                      </Grid>
752                                  </Grid>
753  
754                              </Flyout>
755                          </Button.Flyout>
756                      </Button>
757                  </StackPanel>
758              </ScrollViewer>
759          </ContentDialog>
760      </Grid>
761  </Page>