This commit is contained in:
Zihan Chen
2021-06-18 18:14:03 -07:00
parent 6fb7579c39
commit d17679fcff
6 changed files with 150 additions and 1 deletions
@@ -9,13 +9,17 @@
</Folder>
</Folder>
<Folder name="MainWindow">
<Instance name="TabWindowTemplateResource" content="File">Window.xml</Instance>
<Instance name="WindowTemplate" content="File">Window.xml</Instance>
<Instance name="TabHeaderButtonTemplate" content="File">TabHeaderButton.xml</Instance>
<Instance name="TabHeaderTemplate" content="File">TabHeader.xml</Instance>
<Instance name="TabTemplate" content="File">Tab.xml</Instance>
<Instance name="MainWindowResource">
<Instance ref.Class="sample::MainWindow">
<Window ref.Name="self" Text="control_basic_window" ClientSize="x:640 y:480">
<att.ControlTemplate>sample::TabWindowTemplate</att.ControlTemplate>
<Tab>
<att.ControlTemplate>sample::TabWindowTabTemplate</att.ControlTemplate>
<att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
<att.Pages>
<TabPage Text="First"/>
@@ -0,0 +1,81 @@
<Instance ref.CodeBehind="false" ref.Class="sample::TabWindowTabTemplate">
<ref.Members>
<![CDATA[
func UpdateTabHeader() : void
{
for (flowItem in header.FlowItems)
{
var item = cast (TabWindowTabHeaderTemplate*) flowItem.Children[0];
if (item.CurrentTabPage == self.SelectedTabPage)
{
flowItem.ExtraMargin = {left:2 top:2 right:2 bottom:0};
header.MoveChild(flowItem, header.Children.Count - 1);
}
else
{
flowItem.ExtraMargin = {left:0 top:0 right:0 bottom:0};
}
}
}
]]>
</ref.Members>
<RibbonTabTemplate ref.Name="self" ContainerComposition-ref="container" TabOrder="LeftToRight" MinSizeLimitation="LimitToElementAndChildren">
<ev.SelectedTabPageChanged-eval>
<![CDATA[
{
self.UpdateTabHeader();
}
]]>
</ev.SelectedTabPageChanged-eval>
<att.BeforeHeadersContainer-ref>beforeHeadersContainer</att.BeforeHeadersContainer-ref>
<att.AfterHeadersContainer-ref>afterHeadersContainer</att.AfterHeadersContainer-ref>
<Table AlignmentToParent="left:0 top:0 right:0 bottom:0" MinSizeLimitation="LimitToElementAndChildren">
<SolidBackground Color="#2D2D30"/>
<att.Rows>
<CellOption>composeType:MinSize</CellOption>
<CellOption>composeType:Absolute absolute:2</CellOption>
<CellOption>composeType:Percentage percentage:1.0</CellOption>
</att.Rows>
<att.Columns>
<CellOption>composeType:MinSize</CellOption>
<CellOption>composeType:Percentage percentage:1.0</CellOption>
<CellOption>composeType:MinSize</CellOption>
</att.Columns>
<Cell ref.Name="beforeHeadersContainer" Site="row:0 column:0"/>
<Cell ref.Name="afterHeadersContainer" Site="row:0 column:2"/>
<Cell Site="row:0 column:1">
<RepeatFlow ref.Name="header" AlignmentToParent="left:0 top:0 right:0 bottom:0" ExtraMargin="left:2 top:2 right:2 bottom:0" MinSizeLimitation="LimitToElementAndChildren">
<att.ItemTemplate>sample::TabWindowTabHeaderTemplate</att.ItemTemplate>
<att.ItemSource-bind>self.TabPages</att.ItemSource-bind>
<ev.ItemInserted-eval>
<![CDATA[
{
var flowItem = header.FlowItems[arguments.itemIndex];
var item = cast (TabWindowTabHeaderTemplate*) flowItem.Children[0];
item.Commands = self.Commands;
self.UpdateTabHeader();
}
]]>
</ev.ItemInserted-eval>
<ev.ItemRemoved-eval>
<![CDATA[
{
self.UpdateTabHeader();
}
]]>
</ev.ItemRemoved-eval>
</RepeatFlow>
</Cell>
<Cell Site="row:1 column:0 columnSpan:3">
<SolidBackground Color="#007ACC"/>
</Cell>
<Cell Site="row:2 column:0 columnSpan:3">
<SolidBorder Color="#434346"/>
<Bounds ref.Name="container" AlignmentToParent="left:1 top:1 right:1 bottom:1"/>
</Cell>
</Table>
</RibbonTabTemplate>
</Instance>
@@ -0,0 +1,25 @@
<Instance ref.CodeBehind="false" ref.Class="sample::TabWindowTabHeaderTemplate">
<ref.Parameter Name="CurrentTabPage" Class="presentation::controls::GuiTabPage"/>
<ref.Members>
<![CDATA[
prop Commands : ITabCommandExecutor* = null {}
]]>
</ref.Members>
<ControlTemplate ref.Name="self" MinSizeLimitation="LimitToElementAndChildren">
<CheckBox AutoFocus="false" AutoSelection="false">
<att.ControlTemplate>sample::TabWindowTabHeaderButtonTemplate</att.ControlTemplate>
<att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
<att.Context-ref>CurrentTabPage</att.Context-ref>
<att.Text-bind>CurrentTabPage.Text</att.Text-bind>
<att.Alt-bind>CurrentTabPage.Alt</att.Alt-bind>
<att.Selected-bind>CurrentTabPage.OwnerTab.SelectedPage == CurrentTabPage</att.Selected-bind>
<ev.Clicked-eval>
<![CDATA[
{
self.Commands.ShowTab(CurrentTabPage.OwnerTab.Pages.IndexOf(CurrentTabPage), true);
}
]]>
</ev.Clicked-eval>
</CheckBox>
</ControlTemplate>
</Instance>
@@ -0,0 +1,39 @@
<Instance ref.CodeBehind="false" ref.Class="sample::TabWindowTabHeaderButtonTemplate">
<ref.Members>
<![CDATA[
prop TabFocused: bool = false {}
]]>
</ref.Members>
<SelectableButtonTemplate ref.Name="self" MinSizeLimitation="LimitToElementAndChildren">
<att.TabFocused-bind>(cast (TabPage*) self.Context).OwnerTab.Focused ?? false</att.TabFocused-bind>
<SolidBackground>
<att.Color-bind>
<![CDATA[
cast Color let state = self.State in (
self.Selected ? "#007ACC" :
state == ButtonState::Active ? "#1C97EA" :
state == ButtonState::Pressed ? "#1C97EA" :
"#434346"
)
]]>
</att.Color-bind>
</SolidBackground>
<Bounds AlignmentToParent="left:1 top:1 right:1 bottom:1" Visible-bind="self.Selected and self.TabFocused" MinSizeLimitation="LimitToElementAndChildren">
<FocusRectangle/>
</Bounds>
<Bounds AlignmentToParent="left:6 top:3 right:6 bottom:3" MinSizeLimitation="LimitToElementAndChildren">
<SolidLabel Text-bind="self.Text" Font-bind="self.Font" HorizontalAlignment="Center" VerticalAlignment="Center">
<att.Color-bind>
<![CDATA[
cast Color let state = self.State in (
not self.VisuallyEnabled ? "#6D6D6D" :
state == ButtonState::Active ? "#F1F1F1" :
state == ButtonState::Pressed ? "#FFFFFF" :
"#F1F1F1"
)
]]>
</att.Color-bind>
</SolidLabel>
</Bounds>
</SelectableButtonTemplate>
</Instance>