Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Update: WIP #2013

Merged
merged 55 commits into from
May 24, 2018
Merged

UI Update: WIP #2013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
f230303
Fix crash (#1913).
azchohfi Apr 5, 2018
d360443
Fluentized BladeView control and fixed collapsed/expanded functionality
shweaver-MSFT Apr 10, 2018
1657cdc
Fluentized Expander control
shweaver-MSFT Apr 10, 2018
121b2b8
Fluentized BladeView control and fixed collapsed/expanded functionality
shweaver-MSFT Apr 10, 2018
97d3770
Merge branch 'shweaver/expander' into shweaver/fluent
shweaver-MSFT Apr 11, 2018
cf345fc
Merge branch 'shweaver/bladeview' into shweaver/fluent
shweaver-MSFT Apr 11, 2018
3862089
Updated GridSplitter control
shweaver-MSFT Apr 11, 2018
d60ac19
Sample page tweaks
shweaver-MSFT Apr 11, 2018
fae6b47
Merge branch 'shweaver/gridsplitter' into ui-update
shweaver-MSFT Apr 11, 2018
3e7693b
Fluentize InAppNotifications control
shweaver-MSFT Apr 11, 2018
451e041
Merge branch 'shweaver/inappnotifications' into ui-update
shweaver-MSFT Apr 16, 2018
4a43744
Updated FileMenu control template
shweaver-MSFT Apr 18, 2018
ed4007f
Merge branch 'shweaver/filemenu' into ui-update
shweaver-MSFT Apr 18, 2018
8a8b1ce
Menu sample tweaks
shweaver-MSFT Apr 19, 2018
b5e6d8f
Updated OrbitView design
shweaver-MSFT Apr 19, 2018
91ce35b
Merge branch 'shweaver/orbitview' into ui-update
shweaver-MSFT Apr 19, 2018
450f3b9
Migrating Dashoe's upated RangeSelector into the toolkit
shweaver-MSFT Apr 25, 2018
d6dc69b
Merge branch 'shweaver/rangeselector' into ui-update
shweaver-MSFT Apr 25, 2018
e7a5e27
Updated TextToolbar template
shweaver-MSFT Apr 25, 2018
a450a95
Merge branch 'shweaver/texttoolbar' into ui-update
shweaver-MSFT Apr 25, 2018
eba35b0
wip
shweaver-MSFT Apr 30, 2018
7103a41
Added border to Menu and moved AcrylicBrush to code with type safety …
shweaver-MSFT Apr 30, 2018
ad6fe28
Added null checks for RangeSelector tooltip and value textBlocks to e…
shweaver-MSFT Apr 30, 2018
c4951ff
RadialGauge design update
shweaver-MSFT Apr 30, 2018
f3673e9
Merge branch 'shweaver/radialgauge' into ui-update
shweaver-MSFT Apr 30, 2018
f08f683
Fix Expander to have proper height when collapsed and no content overlay
shweaver-MSFT May 1, 2018
a1476e0
Color updates to Expander
shweaver-MSFT May 1, 2018
057f118
Swapped out colors for ThemeResources in GridSplitter sample page
shweaver-MSFT May 1, 2018
586f01f
Merge branch 'rel/3.0.0-preview' into ui-update
shweaver-MSFT May 2, 2018
18a59c1
Fixed Menu commands
shweaver-MSFT May 4, 2018
65afbab
Reset RadialGauge property defaults and removed unecessary content fr…
shweaver-MSFT May 4, 2018
c74e70f
Fixed buttons offset in InAppNotification template and fixed dismiss …
shweaver-MSFT May 4, 2018
f61789a
Merge branch 'rel/3.0.0-preview' into ui-update
shweaver-MSFT May 4, 2018
6f59dd2
Merge branch 'onovotny/tpmv-update' into ui-update
shweaver-MSFT May 4, 2018
e0b4866
Fixed Acrylic in control templates using Conditional XAML
shweaver-MSFT May 4, 2018
babb82c
Merge branch 'rel/3.0.0-preview' into ui-update
nmetulev May 13, 2018
70805b7
PR fixes
shweaver-MSFT May 18, 2018
5296ef1
Added ShowValues property to RangeSelector for visibility toggling. D…
shweaver-MSFT May 18, 2018
ac515b9
Resetting RangeSelector default values
shweaver-MSFT May 18, 2018
af0fecc
BladeView Dark Theme updates
shweaver-MSFT May 22, 2018
af51ee8
Expander Dark Theme updates
shweaver-MSFT May 22, 2018
3088c04
Menu Dark Theme updates
shweaver-MSFT May 22, 2018
3732e13
InAppNotification Dark Theme updates
shweaver-MSFT May 22, 2018
2b98d64
Merge branch 'master' into ui-update
shweaver-MSFT May 22, 2018
6986707
RangeSelector Dark Theme updates. Added Background to tooltip
shweaver-MSFT May 22, 2018
75b4466
RangeSelector color fixes
shweaver-MSFT May 23, 2018
5e11a42
Merge branch 'master' into ui-update
shweaver-MSFT May 23, 2018
ce774ef
Color updates for RadialGauge control
shweaver-MSFT May 23, 2018
2702a70
Merge branch 'master' into ui-update
nmetulev May 23, 2018
66bd14f
RangeSelector tooltip bug fix
shweaver-MSFT May 23, 2018
3d656d0
Merge branch 'ui-update' of https://github.com/shweaver-MSFT/UWPCommu…
shweaver-MSFT May 23, 2018
b4496e5
Merge branch 'master' into ui-update
shweaver-MSFT May 23, 2018
d1fc2c4
Merge branch 'master' into ui-update
nmetulev May 23, 2018
8cc2380
Merge branch 'master' into ui-update
nmetulev May 24, 2018
f98e93c
Merge branch 'master' into ui-update
nmetulev May 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/BladeView/BladeCode.bind
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@
<Setter Property="Header" Value="Default Blade" />
<Setter Property="Width" Value="400" />
<Setter Property="IsOpen" Value="True" />
<Setter Property="Background" Value="White" />
<Setter Property="Opacity" Value="0.8" />
</Style>
</Page.Resources>

Expand Down
45 changes: 1 addition & 44 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander/ExpanderPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,49 +7,6 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer>
<StackPanel Margin="20">
<controls:Expander x:Name="Expander1" VerticalAlignment="Top" Margin="0,0,0,10"
Header="This is the header - expander 1"
HorizontalContentAlignment="Stretch"
Foreground="White"
Background="{Binding Path=BackgroundExpander1.Value, Mode=TwoWay}"
IsExpanded="{Binding Path=IsExpanded1.Value, Mode=TwoWay}"
ExpandDirection="{Binding Path=ExpandDirection1.Value, Mode=TwoWay}">
<Grid>
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap"
Text="This is the content"
VerticalAlignment="Center"
Style="{StaticResource HeaderTextBlockStyle}" />
</Grid>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

<controls:Expander.ContentOverlay>
<Grid Background="Red" MinHeight="250">
<TextBlock Text="Hello world!"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</controls:Expander.ContentOverlay>
</controls:Expander>

<controls:Expander x:Name="Expander2" VerticalAlignment="Top" Margin="0"
Header="This is the header - expander 2"
HorizontalContentAlignment="Stretch"
Foreground="White"
Background="{Binding Path=BackgroundExpander2.Value, Mode=TwoWay}"
IsExpanded="{Binding Path=IsExpanded2.Value, Mode=TwoWay}"
ExpandDirection="{Binding Path=ExpandDirection2.Value, Mode=TwoWay}">
<Grid Height="250">
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap"
Text="This is the content"
VerticalAlignment="Center"
Style="{StaticResource HeaderTextBlockStyle}" />
</Grid>
</controls:Expander>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>
48 changes: 24 additions & 24 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander/ExpanderXaml.bind
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,46 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
<SolidColorBrush Color="{StaticResource SystemChromeLowColor}" x:Key="SystemControlForegroundChromeLowBrush"/>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer>
<StackPanel Margin="20">
<controls:Expander x:Name="Expander1" VerticalAlignment="Top" Margin="0,0,0,10"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. The expander no longer fully collapses. For example, change the second expander direction to Down and collapse it. The expander should completely collapse into the header.

  2. The background property should also change the background of the header when collapsed.

Copy link
Member Author

@shweaver-MSFT shweaver-MSFT May 1, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue 1 is fixed, but issue 2 conflicts with the design redlines a little bit. I did my best to compensate though. Take a look and let me know what you think.

Header="This is the header - expander 1"
HorizontalContentAlignment="Stretch"
Foreground="White"
Background="@[BackgroundExpander1:Brush:Gray]"
IsExpanded="@[IsExpanded1:Bool:False]@"
ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]">
Header="This is the header - expander 1"
HorizontalContentAlignment="Stretch"
IsExpanded="@[IsExpanded1:Bool:False]@"
ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]">
<Grid>
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap"
Text="This is the expanded content"
VerticalAlignment="Center"
Style="{StaticResource HeaderTextBlockStyle}" />
TextWrapping="Wrap"
Text="This is the expanded content"
VerticalAlignment="Center" />
</Grid>

<controls:Expander.ContentOverlay>
<Grid Background="Red" MinHeight="250">
<Grid Height="120">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should stick with MinHeight here as otherwise it looks a bit strange if the expand direction is left or right.

<TextBlock Text="This is the content overlay"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</controls:Expander.ContentOverlay>
</controls:Expander>

<controls:Expander x:Name="Expander2" VerticalAlignment="Top" Margin="0"
Header="This is the header - expander 2"
HorizontalContentAlignment="Stretch"
Foreground="White"
Background="@[BackgroundExpander2:Brush:Black]"
IsExpanded="@[IsExpanded2:Bool:True]@"
ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]">
<Grid Height="250">
Header="This is the header - expander 2"
HorizontalContentAlignment="Stretch"
IsExpanded="@[IsExpanded2:Bool:True]@"
ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]">
<Grid Height="256"
Background="{ThemeResource SystemControlBackgroundBaseHighBrush}">
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap"
Text="This is the expanded content without a content overlay"
VerticalAlignment="Center"
Style="{StaticResource HeaderTextBlockStyle}" />
TextWrapping="Wrap"
Text="This is the expanded content without a content overlay"
VerticalAlignment="Center"
Foreground="{ThemeResource SystemControlForegroundChromeLowBrush}" />
</Grid>
</controls:Expander>
</StackPanel>
Expand Down
151 changes: 72 additions & 79 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GridSplitter/GridSplitter.bind
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,105 +7,97 @@
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d">

<Grid x:Name="RootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="48">
<Page.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1,1,0,0" />
<Setter Property="Padding" Value="16" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
</Style>

<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
</Page.Resources>

<Grid x:Name="RootGrid"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Margin="48"
BorderThickness="0,0,1,1"
BorderBrush="{ThemeResource SystemControlHighlightChromeHighBrush}"
Height="500"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition MinHeight="100" MaxHeight="300" />
<RowDefinition Height="11" />
<RowDefinition />
<RowDefinition Height="200" />
<RowDefinition MinHeight="100" MaxHeight="300" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" MaxWidth="300" />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition MinWidth="100" MaxWidth="300" />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<Rectangle Grid.Column="0"
Grid.Row="0"
Fill="{StaticResource Brush-White}"
Stroke="{StaticResource Brush-Grey-04}"
StrokeThickness="1"/>
<Rectangle Grid.Column="1"
Grid.Row="0"
Fill="{StaticResource Brush-White}"
Stroke="{StaticResource Brush-Grey-04}"
StrokeThickness="1"/>
<Rectangle Grid.Column="2"
Grid.Row="0"
Fill="{StaticResource Brush-White}"
Stroke="{StaticResource Brush-Grey-04}"
StrokeThickness="1"/>
<Rectangle Grid.Column="0"
Grid.Row="2"
Fill="{StaticResource Brush-White}"
Stroke="{StaticResource Brush-Grey-04}"
StrokeThickness="1"/>
<Rectangle Grid.Column="1"
Grid.Row="2"
Fill="{StaticResource Brush-White}"
Stroke="{StaticResource Brush-Grey-04}"
StrokeThickness="1"/>
<Rectangle Grid.Column="2"
Grid.Row="2"
Fill="{StaticResource Brush-White}"
Stroke="{StaticResource Brush-Grey-04}"
StrokeThickness="1"/>
<Border Grid.Column="0"
Grid.Row="0">
<TextBlock>
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect RowDefinition MinHeight="100"
</TextBlock>
</Border>
<Border Grid.Column="1"
Grid.Row="0">
<TextBlock>
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
</Border>
<Border Grid.Column="2"
Grid.Row="0">
<TextBlock>
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
</Border>

<TextBlock Grid.Column="0"
TextWrapping="Wrap"
Margin="12,12">
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect RowDefinition MinHeight="100"
</TextBlock>
<TextBlock Grid.Column="1"
Grid.Row="0"
TextWrapping="Wrap"
Margin="12,12">
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
<TextBlock Grid.Column="2"
Grid.Row="0"
TextWrapping="Wrap"
Margin="12,12">
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>

<TextBlock Grid.Column="0"
Grid.Row="2"
TextWrapping="Wrap"
Margin="12,12">
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
<TextBlock Grid.Column="1"
Grid.Row="2"
TextWrapping="Wrap"
Margin="12,12">
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
<TextBlock Grid.Column="2"
Grid.Row="2"
TextWrapping="Wrap"
Margin="12,12">
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
<Border Grid.Column="0"
Grid.Row="1">
<TextBlock>
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
</Border>
<Border Grid.Column="1"
Grid.Row="1">
<TextBlock>
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
</Border>
<Border Grid.Column="2"
Grid.Row="1">
<TextBlock>
This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect
</TextBlock>
</Border>

<!--Column Grid Splitter-->
<controls:GridSplitter
Width="11"
Background="{StaticResource Brush-Grey-04}"
GripperCursor="@[GripperCursor:Enum:GripperCursorType.Default]"
HorizontalAlignment="@[HorizontalAlignment:Enum:HorizontalAlignment.Left]"
Grid.Column="@[Column:Slider:1:0-2]"
ResizeDirection="@[ResizeDirection:Enum:GridResizeDirection.Auto]"
ResizeBehavior="@[ResizeBehavior:Enum:GridResizeBehavior.BasedOnAlignment]"
CursorBehavior="@[CursorBehavior:Enum:SplitterCursorBehavior.ChangeOnSplitterHover]"
GripperForeground="White">
Width="16">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>

</controls:GridSplitter>

<!--Row Grid Splitter-->
<controls:GridSplitter
Grid.Row="1"
Background="{StaticResource Brush-Grey-04}" Height="11"
HorizontalAlignment="Stretch">
Grid.ColumnSpan="3"
VerticalAlignment="Top"
Height="16">
<controls:GridSplitter.RenderTransform>
<TranslateTransform Y="-8" />
</controls:GridSplitter.RenderTransform>
<controls:GridSplitter.Element>
<Grid>
<TextBlock HorizontalAlignment="Center"
Expand All @@ -118,6 +110,7 @@
</Grid>
</controls:GridSplitter.Element>
</controls:GridSplitter>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Full">
Expand Down
Loading