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

Jump to bottom

TabControl Underlined TabPanel #2902

Merged
merged 12 commits into from
Mar 22, 2017
Merged

TabControl Underlined TabPanel #2902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
05f9e22
Add new Underlined attached property
punker76 Mar 21, 2017
9a63465
New Underline content control
punker76 Mar 21, 2017
a7cb005
Use new Underline control and Underlined property
punker76 Mar 21, 2017
447c96b
Improve TabControl samples
punker76 Mar 21, 2017
0096e3c
Additional Underline type
punker76 Mar 21, 2017
322f01b
Improve TabControl samples again
punker76 Mar 21, 2017
b86b5f3
New LineExtent property for Underline
punker76 Mar 22, 2017
0d871ea
Bring back the column stuff
punker76 Mar 22, 2017
c9ebda1
Another UseLayoutRounding...
punker76 Mar 22, 2017
e12b873
Background stuff
punker76 Mar 22, 2017
7e9499a
Add brush attached properties
punker76 Mar 22, 2017
fa7b786
update 1.5.0.md
punker76 Mar 22, 2017
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
24 changes: 23 additions & 1 deletion docs/release-notes/1.5.0.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,28 @@
- New `Badged` control. Thx to @ButchersBoy
![image](https://cloud.githubusercontent.com/assets/658431/23340345/d7dc4c86-fc34-11e6-838b-1ebee9381c7d.png)
- The `ControlsHelper.CornerRadius` can now used for `SplitButton` and `DropDownButton`.

- New underline types for `TabControl` and `MetroTabControl` [#2902](https://github.com/MahApps/MahApps.Metro/pull/2902)
+ Adds a new `Underlined` attached property to `TabControlHelper` which controls the type of the underline type. The old `IsUnderlined` property is now obsolete.
```
/// <summary>
/// Specifies the underline position of a TabControl.
/// </summary>
public enum UnderlinedType
{
None, // nothing
TabItems, // the old behavior with `IsUnderlined="True"`
SelectedTabItem, // selected TabItem underlined + underline hover effect for unselected items
TabPanel // underlined TabPanel and selected/hovered TabItem
}
```
+ Add also new `Brush` attached properties to enable easy changing the underline brushes.
```
TabControlHelper.UnderlineBrush
TabControlHelper.UnderlineSelectedBrush
TabControlHelper.UnderlineMouseOverBrush
TabControlHelper.UnderlineMouseOverSelectedBrush
```
![mahapps_newunderline4](https://cloud.githubusercontent.com/assets/658431/24204520/0e6f3cbc-0f19-11e7-8a2b-f40752918a96.gif)

## Closed Issues

Expand All @@ -33,3 +54,4 @@
- [#2792](https://github.com/MahApps/MahApps.Metro/issues/2792) Win32Exception on closing window
- [#2886](https://github.com/MahApps/MahApps.Metro/issues/2886) NumericUpDown: HasDecimals=False & using a bound StringFormat allows to enter a decimal point [@davericardo](https://github.com/davericardo)
- [#2885](https://github.com/MahApps/MahApps.Metro/issues/2885) [Bug] Badged Control Causes Window Loading to Hang
- [#2895](https://github.com/MahApps/MahApps.Metro/issues/2895) [RFC] [Enhancement] Proposed TabControlHelper.IsUnderlined Change
165 changes: 83 additions & 82 deletions ...Samples/MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/ExampleViews/TabControlExamples.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,49 @@
d:DesignWidth="800"
d:DataContext="{d:DesignInstance MetroDemo:MainWindowViewModel}">

<UserControl.Resources>
<ObjectDataProvider x:Key="TabStripPlacementEnumValues"
MethodName="GetValues"
ObjectType="{x:Type Dock}">
<ObjectDataProvider.MethodParameters>
<x:Type TypeName="Dock" />
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
<ObjectDataProvider x:Key="UnderlinedEnumValues"
MethodName="GetValues"
ObjectType="{x:Type Controls:UnderlinedType}">
<ObjectDataProvider.MethodParameters>
<x:Type TypeName="Controls:UnderlinedType" />
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
</UserControl.Resources>

<ScrollViewer>
<StackPanel Margin="5, 10, 5, 0">
<Expander Margin="0" Header="_Default TabControl">
<Expander Margin="0" IsExpanded="True" Header="_Default TabControl">
<StackPanel Margin="15, 5, 15, 5">
<Label Content="Default TabControl normal style" Style="{DynamicResource DescriptionHeaderStyle}" />
<TabControl>
<Label Content="Default TabControl" Style="{DynamicResource DescriptionHeaderStyle}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Underlined type" Margin="5 5" VerticalAlignment="Center" />
<ComboBox x:Name="UnderlinedComboBox"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="5 5"
Width="100"
ItemsSource="{Binding Source={StaticResource UnderlinedEnumValues}}"
SelectedIndex="0" />
<TextBlock Text="TabStripPlacement" Margin="5 5" VerticalAlignment="Center" />
<ComboBox x:Name="TabStripPlacementComboBox"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="5 5"
Width="100"
ItemsSource="{Binding Source={StaticResource TabStripPlacementEnumValues}}"
SelectedItem="{x:Static Dock.Top}" />
</StackPanel>
<TabControl Height="200"
Controls:TabControlHelper.Underlined="{Binding ElementName=UnderlinedComboBox, Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TabStripPlacement="{Binding ElementName=TabStripPlacementComboBox, Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _1">
<TextBlock FontSize="30" Text="Content" />
</TabItem>
Expand All @@ -35,27 +72,7 @@
<TextBlock FontSize="30" Text="This is not content (it is)" />
</TabItem>
</TabControl>
<Label Content="Default _TabControl with underline" Style="{DynamicResource DescriptionHeaderStyle}" />
<TabControl Controls:TabControlHelper.IsUnderlined="True">
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 1">
<TextBlock FontSize="30" Text="Content" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 2">
<TextBlock FontSize="30" Text="More content" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 3">
<TextBlock FontSize="30" Text="More more content" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 4">
<TextBlock FontSize="30" Text="So much content!" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 5">
<TextBlock FontSize="30" Text="Content!" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 6">
<TextBlock FontSize="30" Text="This is not content (it is)" />
</TabItem>
</TabControl>

<Label Margin="0, 5, 0, 0"
Content="Default TabControl with _AnimatedTabControl style"
Style="{DynamicResource DescriptionHeaderStyle}" />
Expand All @@ -75,6 +92,7 @@
</Controls:MetroTabItem>
</TabControl>
</Grid>

<Label Margin="0, 5, 0, 0"
Content="Default TabControl with Animated_SingleRowTabControl style"
Style="{DynamicResource DescriptionHeaderStyle}" />
Expand All @@ -97,50 +115,11 @@
</TabItem>
</TabControl>
</Grid>
<Label Margin="0, 5, 0, 0"
Content="Default TabControl _left style"
Style="{DynamicResource DescriptionHeaderStyle}" />
<Grid>
<Grid.Resources>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
</Grid.Resources>
<TabControl Height="200"
Margin="0, 10, 0, 0"
Controls:TabControlHelper.IsUnderlined="True"
TabStripPlacement="Left">
<TabItem Header="LeftItem 0">
<TextBlock FontSize="24" Text="This is left content 0" />
</TabItem>
<TabItem Header="LeftItem 1 Header">
<TextBlock FontSize="24" Text="This is left content 1" />
</TabItem>
<TabItem Header="LeftItem 2 Text">
<TextBlock FontSize="24" Text="This is left content 2" />
</TabItem>
<TabItem Header="LeftItem 3">
<TextBlock FontSize="24" Text="This is left content 3" />
</TabItem>
<TabItem Header="LeftItem 4">
<TextBlock FontSize="24" Text="This is left content 4" />
</TabItem>
</TabControl>
</Grid>
<!--
Right & Bottom are both work, no need to show them all
<TabControl TabStripPlacement="Right" Style="{DynamicResource MetroTabControl}">
<TabItem Header="RightItem0" Content="This is Right content 0" />
<TabItem Header="RightItem1" Content="This is Right content 1" />
<TabItem Header="RightItem2" Content="This is Right content 2" />
</TabControl>
<TabControl TabStripPlacement="Bottom" Style="{DynamicResource MetroTabControl}">
<TabItem Header="BottomItem0" Content="This is Bottom content 0" />
<TabItem Header="BottomItem1" Content="This is Bottom content 1" />
<TabItem Header="BottomItem2" Content="This is Bottom content 2" />
</TabControl>
-->

</StackPanel>
</Expander>
<Expander Margin="0, 10, 0, 0" Header="_Generic theme TabControls">

<Expander Margin="0, 10, 0, 0" IsExpanded="True" Header="_Generic theme TabControls">
<StackPanel Margin="15, 5, 15, 5">
<Label Content="MetroAnimatedTabControl" Style="{DynamicResource DescriptionHeaderStyle}" />
<Grid>
Expand Down Expand Up @@ -214,6 +193,7 @@
<TextBlock FontSize="30" Text="Animate everything!" />
</TabItem>
</Controls:MetroAnimatedTabControl>

<Label Margin="0, 5, 0, 0"
Content="MetroAnimatedSingleRowTabControl"
Style="{DynamicResource DescriptionHeaderStyle}" />
Expand All @@ -231,8 +211,9 @@
<TextBlock FontSize="30" Text="Content" />
</TabItem>
</Controls:MetroAnimatedSingleRowTabControl>

<Label Margin="0 5 0 0"
Content="TabControl w/ Closable Items"
Content="MetroTabControl w/ Closable Items"
Style="{DynamicResource DescriptionHeaderStyle}" />
<Controls:MetroTabControl TabItemClosingEvent="MetroTabControl_TabItemClosingEvent">
<Controls:MetroTabItem CloseButtonEnabled="True"
Expand Down Expand Up @@ -277,29 +258,49 @@
</Controls:MetroTabControl>

<Label Margin="0, 5, 0, 0"
Content="MetroTabControl _left style"
Content="MetroTabControl style"
Style="{DynamicResource DescriptionHeaderStyle}" />
<Controls:MetroTabControl Height="220"
Margin="0, 10, 0, 0"
Controls:TabControlHelper.IsUnderlined="True"
TabStripPlacement="Left">
<Controls:MetroTabItem Header="LeftItem 0">
<TextBlock FontSize="24" Text="This is left content 0" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Underlined type" Margin="5 5" VerticalAlignment="Center" />
<ComboBox x:Name="MetroTabControlUnderlinedComboBox"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="5 5"
ItemsSource="{Binding Source={StaticResource UnderlinedEnumValues}}"
SelectedIndex="0" />
<TextBlock Text="TabStripPlacement" Margin="5 5" VerticalAlignment="Center" />
<ComboBox x:Name="MetroTabStripPlacementComboBox"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="5 5"
Width="100"
ItemsSource="{Binding Source={StaticResource TabStripPlacementEnumValues}}"
SelectedItem="{x:Static Dock.Top}" />
</StackPanel>
<Controls:MetroTabControl Height="200"
Controls:TabControlHelper.Underlined="{Binding ElementName=MetroTabControlUnderlinedComboBox, Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TabStripPlacement="{Binding ElementName=MetroTabStripPlacementComboBox, Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _1">
<TextBlock FontSize="30" Text="Content" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _2 more">
<TextBlock FontSize="30" Text="More content" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="LeftItem 1 Header">
<TextBlock FontSize="24" Text="This is left content 1" />
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _3 header here">
<TextBlock FontSize="30" Text="More more content" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="LeftItem 2 Text">
<TextBlock FontSize="24" Text="This is left content 2" />
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _4 ">
<TextBlock FontSize="30" Text="So much content!" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="LeftItem 3" CloseButtonEnabled="True">
<TextBlock FontSize="24" Text="This is left content 3" />
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _5" CloseButtonEnabled="True">
<TextBlock FontSize="30" Text="Content!" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="LeftItem 4">
<TextBlock FontSize="24" Text="This is left content 4" />
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _6">
<TextBlock FontSize="30" Text="This is not content (it is)" />
</Controls:MetroTabItem>
</Controls:MetroTabControl>
</StackPanel>

</Expander>
</StackPanel>

Expand Down
Loading