Skip to content

Commit 4ea9a9e

Browse files
michael-hawkermichael-hawker
committed
Update Binding and Toolbox Panes to Fluent
Also tweak the dividers for the Propertes pane
1 parent 3c2adce commit 4ea9a9e

4 files changed

Lines changed: 147 additions & 124 deletions

File tree

‎XamlStudio/Strings/en-us/Resources.resw‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -689,7 +689,7 @@ Please help us by reporting this issue in Feedback Hub.</value>
689689
<comment>Accessibility name for expander in SettingsPanel for Third-Party Notices</comment>
690690
</data>
691691
<data name="Debug_Binding_Disabled_Message.Text" xml:space="preserve">
692-
<value>Turn on Binding Debugging to see information here.</value>
692+
<value>Turn on Binding Debugging and create a Binding to see information here.</value>
693693
<comment>Text which appears in Debug panel when Binding Debugging is turned off.</comment>
694694
</data>
695695
<data name="Debug_Button_ClearHistoryFilter.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">

‎XamlStudio/Views/Binding.xaml‎

Lines changed: 108 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -17,101 +17,105 @@
1717
mc:Ignorable="d">
1818

1919
<Page.Resources>
20-
<Style x:Key="ListViewItemContainerWideStyle" TargetType="ListViewItem">
21-
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
22-
</Style>
23-
<DataTemplate x:Key="XamlBindingInfoTemplate" x:DataType="models:XamlBindingInfo">
24-
<StackPanel Margin="0,8,0,8"
25-
BorderBrush="Gray"
26-
BorderThickness="0,0,0,1">
27-
<Grid>
28-
<Grid.ColumnDefinitions>
29-
<ColumnDefinition Width="*" />
30-
<ColumnDefinition Width="Auto" />
31-
</Grid.ColumnDefinitions>
32-
<TextBlock FontFamily="Segoe UI"
33-
FontSize="12"
34-
FontWeight="SemiBold"
35-
Text="{x:Bind}" />
36-
<TextBlock Grid.Column="1">
37-
x<Run Text="{x:Bind BindingCount, Mode=OneWay}" /></TextBlock>
38-
</Grid>
39-
<TextBlock HorizontalAlignment="Right" Text="{x:Bind LastKnownBindingState, Mode=OneWay}" />
40-
<controls:SwitchPresenter TargetType="x:Boolean" Value="{x:Bind HasConverter}">
41-
<controls:Case Value="True">
42-
<StackPanel>
43-
<TextBlock Text="{x:Bind LastConvertedValue.ToString(), Mode=OneWay}" />
44-
<TextBlock HorizontalAlignment="Center" Text="=&gt;" />
45-
<TextBlock HorizontalAlignment="Right" Text="{x:Bind LastConvertedResult.ToString(), Mode=OneWay}" />
46-
</StackPanel>
47-
</controls:Case>
48-
<controls:Case Value="False">
49-
<TextBlock HorizontalAlignment="Right" Text="{x:Bind LastConvertedResultOrValue.ToString(), Mode=OneWay}" />
50-
</controls:Case>
51-
</controls:SwitchPresenter>
52-
<TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind LastConvertedTime.ToString('HH:mm:ss.fffffff', globalization:CultureInfo.CurrentCulture), Mode=OneWay}" />
53-
</StackPanel>
54-
</DataTemplate>
55-
<DataTemplate x:Key="ConversionRecordTemplate" x:DataType="models:ConversionRecord">
56-
<StackPanel>
57-
<controls:SwitchPresenter TargetType="x:Boolean" Value="{x:Bind Parent.HasConverter}">
58-
<controls:Case Value="True">
59-
<Grid>
60-
<Grid.ColumnDefinitions>
61-
<ColumnDefinition Width="*" />
62-
<ColumnDefinition Width="Auto" />
63-
<ColumnDefinition Width="*" />
64-
</Grid.ColumnDefinitions>
65-
<TextBlock Text="{x:Bind Value.ToString(), Mode=OneWay}" />
66-
<TextBlock Grid.Column="1" Text="=&gt;" />
67-
<TextBlock Grid.Column="2"
68-
HorizontalAlignment="Right"
69-
Text="{x:Bind Result.ToString(), Mode=OneWay}" />
70-
</Grid>
71-
</controls:Case>
72-
<controls:Case Value="False">
73-
<TextBlock HorizontalAlignment="Right" Text="{x:Bind ResultOrValue.ToString(), Mode=OneWay}" />
74-
</controls:Case>
75-
</controls:SwitchPresenter>
76-
<TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind TimeStamp.ToString('HH:mm:ss.fffffff', globalization:CultureInfo.CurrentCulture)}" />
77-
</StackPanel>
78-
</DataTemplate>
79-
<DataTemplate x:Key="ConversionRecordWithParentTemplate" x:DataType="models:ConversionRecord">
80-
<StackPanel Margin="0,0,8,0" HorizontalAlignment="Stretch">
81-
<TextBlock Text="{x:Bind Parent.ToString()}" />
82-
<controls:SwitchPresenter TargetType="x:Boolean" Value="{x:Bind Parent.HasConverter}">
83-
<controls:Case Value="True">
84-
<Grid>
85-
<Grid.ColumnDefinitions>
86-
<ColumnDefinition Width="*" />
87-
<ColumnDefinition Width="Auto" />
88-
<ColumnDefinition Width="*" />
89-
</Grid.ColumnDefinitions>
90-
<TextBlock Text="{x:Bind Value.ToString(), Mode=OneWay}" />
91-
<TextBlock Grid.Column="1" Text="=&gt;" />
92-
<TextBlock Grid.Column="2"
93-
HorizontalAlignment="Right"
94-
Text="{x:Bind Result.ToString(), Mode=OneWay}" />
95-
</Grid>
96-
</controls:Case>
97-
<controls:Case Value="False">
98-
<TextBlock HorizontalAlignment="Right" Text="{x:Bind ResultOrValue.ToString(), Mode=OneWay}" />
99-
</controls:Case>
100-
</controls:SwitchPresenter>
101-
<TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind TimeStamp.ToString('HH:mm:ss.fffffff', globalization:CultureInfo.CurrentCulture)}" />
102-
</StackPanel>
103-
</DataTemplate>
20+
<ResourceDictionary>
21+
<ResourceDictionary.MergedDictionaries>
22+
<ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.Segmented/Segmented/Segmented.xaml" />
23+
</ResourceDictionary.MergedDictionaries>
24+
25+
<Style x:Key="ListViewItemContainerWideStyle" TargetType="ListViewItem" BasedOn="{StaticResource ListViewItemExpanded}">
26+
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
27+
</Style>
28+
<DataTemplate x:Key="XamlBindingInfoTemplate" x:DataType="models:XamlBindingInfo">
29+
<StackPanel Margin="0,8,0,8"
30+
BorderBrush="Gray"
31+
BorderThickness="0,0,0,1">
32+
<Grid>
33+
<Grid.ColumnDefinitions>
34+
<ColumnDefinition Width="*" />
35+
<ColumnDefinition Width="Auto" />
36+
</Grid.ColumnDefinitions>
37+
<TextBlock FontFamily="Segoe UI"
38+
FontSize="12"
39+
FontWeight="SemiBold"
40+
Text="{x:Bind}" />
41+
<TextBlock Grid.Column="1">
42+
x<Run Text="{x:Bind BindingCount, Mode=OneWay}" /></TextBlock>
43+
</Grid>
44+
<TextBlock HorizontalAlignment="Right" Text="{x:Bind LastKnownBindingState, Mode=OneWay}" />
45+
<controls:SwitchPresenter TargetType="x:Boolean" Value="{x:Bind HasConverter}">
46+
<controls:Case Value="True">
47+
<StackPanel>
48+
<TextBlock Text="{x:Bind LastConvertedValue.ToString(), Mode=OneWay}" />
49+
<TextBlock HorizontalAlignment="Center" Text="=&gt;" />
50+
<TextBlock HorizontalAlignment="Right" Text="{x:Bind LastConvertedResult.ToString(), Mode=OneWay}" />
51+
</StackPanel>
52+
</controls:Case>
53+
<controls:Case Value="False">
54+
<TextBlock HorizontalAlignment="Right" Text="{x:Bind LastConvertedResultOrValue.ToString(), Mode=OneWay}" />
55+
</controls:Case>
56+
</controls:SwitchPresenter>
57+
<TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind LastConvertedTime.ToString('HH:mm:ss.fffffff', globalization:CultureInfo.CurrentCulture), Mode=OneWay}" />
58+
</StackPanel>
59+
</DataTemplate>
60+
<DataTemplate x:Key="ConversionRecordTemplate" x:DataType="models:ConversionRecord">
61+
<StackPanel>
62+
<controls:SwitchPresenter TargetType="x:Boolean" Value="{x:Bind Parent.HasConverter}">
63+
<controls:Case Value="True">
64+
<Grid>
65+
<Grid.ColumnDefinitions>
66+
<ColumnDefinition Width="*" />
67+
<ColumnDefinition Width="Auto" />
68+
<ColumnDefinition Width="*" />
69+
</Grid.ColumnDefinitions>
70+
<TextBlock Text="{x:Bind Value.ToString(), Mode=OneWay}" />
71+
<TextBlock Grid.Column="1" Text="=&gt;" />
72+
<TextBlock Grid.Column="2"
73+
HorizontalAlignment="Right"
74+
Text="{x:Bind Result.ToString(), Mode=OneWay}" />
75+
</Grid>
76+
</controls:Case>
77+
<controls:Case Value="False">
78+
<TextBlock HorizontalAlignment="Right" Text="{x:Bind ResultOrValue.ToString(), Mode=OneWay}" />
79+
</controls:Case>
80+
</controls:SwitchPresenter>
81+
<TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind TimeStamp.ToString('HH:mm:ss.fffffff', globalization:CultureInfo.CurrentCulture)}" />
82+
</StackPanel>
83+
</DataTemplate>
84+
<DataTemplate x:Key="ConversionRecordWithParentTemplate" x:DataType="models:ConversionRecord">
85+
<StackPanel Margin="0,0,8,0" HorizontalAlignment="Stretch">
86+
<TextBlock Text="{x:Bind Parent.ToString()}" />
87+
<controls:SwitchPresenter TargetType="x:Boolean" Value="{x:Bind Parent.HasConverter}">
88+
<controls:Case Value="True">
89+
<Grid>
90+
<Grid.ColumnDefinitions>
91+
<ColumnDefinition Width="*" />
92+
<ColumnDefinition Width="Auto" />
93+
<ColumnDefinition Width="*" />
94+
</Grid.ColumnDefinitions>
95+
<TextBlock Text="{x:Bind Value.ToString(), Mode=OneWay}" />
96+
<TextBlock Grid.Column="1" Text="=&gt;" />
97+
<TextBlock Grid.Column="2"
98+
HorizontalAlignment="Right"
99+
Text="{x:Bind Result.ToString(), Mode=OneWay}" />
100+
</Grid>
101+
</controls:Case>
102+
<controls:Case Value="False">
103+
<TextBlock HorizontalAlignment="Right" Text="{x:Bind ResultOrValue.ToString(), Mode=OneWay}" />
104+
</controls:Case>
105+
</controls:SwitchPresenter>
106+
<TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind TimeStamp.ToString('HH:mm:ss.fffffff', globalization:CultureInfo.CurrentCulture)}" />
107+
</StackPanel>
108+
</DataTemplate>
109+
</ResourceDictionary>
104110
</Page.Resources>
105111

106-
<Grid Background="{ThemeResource Brush-Blue-Dark-1}">
112+
<Grid Background="{ThemeResource LayerFillColorDefaultBrush}">
107113
<Grid.RowDefinitions>
108114
<RowDefinition Height="54" />
109115
<RowDefinition Height="Auto" />
110116
<RowDefinition Height="*" />
111117
</Grid.RowDefinitions>
112-
<Border Margin="0,0,-12,0"
113-
Padding="0,12,0,0"
114-
Style="{StaticResource VSCodeAppBarHeaderStyle}">
118+
<Border Style="{StaticResource VSCodeAppBarHeaderStyle}">
115119
<Grid>
116120
<Grid.ColumnDefinitions>
117121
<ColumnDefinition Width="*" />
@@ -121,8 +125,7 @@
121125
<ToggleSwitch x:Name="PowerBindingToggle"
122126
x:Uid="Debug_PowerBindingToggle"
123127
Grid.Column="1"
124-
Width="92"
125-
Height="32"
128+
MinWidth="104"
126129
IsOn="{x:Bind services:SettingsService.Instance.IsPowerBindingDebuggingEnabled.Value, Mode=OneWay}"
127130
Tag="IsPowerBindingDebuggingEnabled">
128131
<i:Interaction.Behaviors>
@@ -139,26 +142,26 @@
139142
</Grid>
140143
</Border>
141144

142-
<ComboBox x:Name="BindingViewMode"
143-
x:Uid="Debug_ViewMode"
144-
Grid.Row="1"
145-
Margin="24,4,0,12"
146-
HorizontalAlignment="Stretch"
147-
SelectedIndex="0">
148-
<!-- TODO: Figure out how to localize options here. -->
149-
<x:String>Bindings</x:String>
150-
<x:String>History</x:String>
151-
</ComboBox>
145+
<controls:Segmented x:Name="BindingViewMode"
146+
Margin="0,-8,0,8"
147+
Grid.Row="1"
148+
HorizontalAlignment="Center"
149+
SelectedValuePath="Tag"
150+
SelectedIndex="0"
151+
Style="{StaticResource PivotSegmentedStyle}">
152+
<!-- TODO: Replace content with x:Uid from resources. -->
153+
<controls:SegmentedItem Content="Bindings" Tag="Bindings" />
154+
<controls:SegmentedItem Content="History" Tag="History" />
155+
</controls:Segmented>
152156

153157
<controls:SwitchPresenter Grid.Row="2"
154-
Margin="20,0,0,0"
158+
Margin="8,0,8,0"
155159
Visibility="{x:Bind services:SettingsService.Instance.IsPowerBindingDebuggingEnabled.Value, Mode=OneWay}"
156-
Value="{x:Bind BindingViewMode.SelectedValue, Mode=OneWay}">
160+
Value="{x:Bind ((controls:SegmentedItem)BindingViewMode.SelectedItem).Tag, Mode=OneWay}">
157161
<controls:Case Value="Bindings">
158162
<ListView HorizontalContentAlignment="Stretch"
159163
IsItemClickEnabled="True"
160164
ItemClick="ListView_ItemClick"
161-
ItemContainerStyle="{StaticResource ListViewItemContainerWideStyle}"
162165
ItemTemplate="{StaticResource XamlBindingInfoTemplate}"
163166
ItemsSource="{x:Bind MainViewModel.ActiveDocumentViewModel.Result.Bindings, Mode=OneWay}"
164167
SelectionMode="None" />
@@ -169,7 +172,6 @@
169172
<ListView HorizontalContentAlignment="Stretch"
170173
IsItemClickEnabled="True"
171174
ItemClick="ListView_ItemClick"
172-
ItemContainerStyle="{StaticResource ListViewItemContainerWideStyle}"
173175
ItemTemplate="{StaticResource ConversionRecordWithParentTemplate}"
174176
ItemsSource="{x:Bind MainViewModel.ActiveDocumentViewModel.BindingHistory, Mode=OneWay}"
175177
SelectionMode="None" />
@@ -184,7 +186,8 @@
184186
<ColumnDefinition Width="*" />
185187
<ColumnDefinition Width="Auto" />
186188
</Grid.ColumnDefinitions>
187-
<ContentPresenter Content="{x:Bind HistoryFilter, Mode=OneWay}" ContentTemplate="{StaticResource XamlBindingInfoTemplate}" />
189+
<ContentPresenter Content="{x:Bind HistoryFilter, Mode=OneWay}" ContentTemplate="{StaticResource XamlBindingInfoTemplate}"
190+
Margin="8,0,0,0"/>
188191
<Button x:Uid="Debug_Button_ClearHistoryFilter"
189192
Grid.Column="1"
190193
Height="40"
@@ -197,7 +200,6 @@
197200
HorizontalContentAlignment="Stretch"
198201
IsItemClickEnabled="True"
199202
ItemClick="ListView_ItemClick"
200-
ItemContainerStyle="{StaticResource ListViewItemContainerWideStyle}"
201203
ItemTemplate="{StaticResource ConversionRecordTemplate}"
202204
ItemsSource="{x:Bind HistoryFilter.BindingHistory, Mode=OneWay}"
203205
SelectionMode="None" />

‎XamlStudio/Views/Properties.xaml‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,13 @@
7777
Visibility="{x:Bind ViewModel.HasElement, Mode=OneWay}" />
7878

7979
<Border Grid.Row="3"
80-
Margin="24,0,4,4"
80+
Margin="12,0,12,4"
8181
Padding="0,0,0,8"
82-
BorderBrush="{ThemeResource Brush-Blue-Dark-2}"
82+
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
8383
BorderThickness="0,0,0,1">
8484
<!-- TODO: Do we want a 'Children' label here? -->
85-
<muxc:ItemsRepeater ItemsSource="{x:Bind ViewModel.SelectedElementChildren, Mode=OneWay}" Visibility="{x:Bind ViewModel.HasChildren, Mode=OneWay}">
85+
<muxc:ItemsRepeater ItemsSource="{x:Bind ViewModel.SelectedElementChildren, Mode=OneWay}" Visibility="{x:Bind ViewModel.HasChildren, Mode=OneWay}"
86+
Margin="12,0,0,0">
8687
<muxc:ItemsRepeater.ItemTemplate>
8788
<DataTemplate x:DataType="DependencyObject">
8889
<TextBlock Padding="36,4,12,4" DataContext="{x:Bind (DependencyObject)}">
@@ -152,21 +153,22 @@
152153
</HyperlinkButton>
153154

154155
<ScrollViewer Grid.Row="5" Margin="24,8,0,0">
155-
<ItemsControl Margin="0,0,8,0" ItemsSource="{x:Bind PropertyViewSource.View, Mode=OneWay}">
156+
<ItemsControl Margin="0,-4,8,0" ItemsSource="{x:Bind PropertyViewSource.View, Mode=OneWay}">
156157
<ItemsControl.GroupStyle>
157158
<GroupStyle HidesIfEmpty="True">
158159
<GroupStyle.HeaderTemplate>
159160
<DataTemplate>
160-
<TextBlock FontWeight="Bold" Text="{Binding Key}" />
161+
<TextBlock FontWeight="Bold" Text="{Binding Key}" Margin="0,8,0,-4"/>
161162
</DataTemplate>
162163
</GroupStyle.HeaderTemplate>
163164
</GroupStyle>
164165
</ItemsControl.GroupStyle>
165166

166167
<ItemsControl.ItemTemplate>
167168
<DataTemplate x:DataType="model:PropertyInfo">
168-
<Grid Padding="12,6,8,6"
169-
BorderBrush="{ThemeResource Brush-Blue-Dark-2}"
169+
<Grid Padding="0,6,0,6"
170+
Margin="12,0,4,0"
171+
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
170172
BorderThickness="0,0,0,1">
171173
<Grid.ColumnDefinitions>
172174
<ColumnDefinition Width="*" />

0 commit comments

Comments
 (0)