<Page
    x:Class="BasicLibrarySamples.ClearStyleTabControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BasicLibrarySamples"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml"
    mc:Ignorable="d">
    <Grid>
        <Grid.Resources>
            <Style TargetType="TextBlock" x:Key="narrowLayoutTextBlock">
                <Setter Property="Width" Value="80"></Setter>
                <Setter Property="FontSize" Value="8"></Setter>
            </Style>
            <Style TargetType="TextBlock" x:Key="wideLayoutTextBlock">
                <Setter Property="Width" Value="150"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Height="50" Grid.Column="1" Margin="0 0 10 0">
            <TextBlock Text="TabStripPlacement:" VerticalAlignment="Center" FontSize="16" Width="140" />
            <ComboBox x:Name="cmbTabStripPlacement" VerticalAlignment="Center" Height="30" Width="130" SelectionChanged="cmbTabStripPlacement_SelectionChanged">
                <ComboBoxItem IsSelected="True">Left</ComboBoxItem>
                <ComboBoxItem>Right</ComboBoxItem>
                <ComboBoxItem>Top</ComboBoxItem>
                <ComboBoxItem>Bottom</ComboBoxItem>
            </ComboBox>
            
        </StackPanel>

        <c1:C1TabControl x:Name="c1TabControl1" Grid.Row="1"
                        BorderThickness="0" 
                        TabStripBackground="Transparent"
                         TabStripPlacement="Left"
                        SelectedBackground="#FF78AA1C">
            <c1:C1TabItem>
                <c1:C1TabItem.Header>
                    <TextBlock x:Name="salesPerMonthTb" Text="Sales Per Month" Style="{StaticResource wideLayoutTextBlock}"/>
                </c1:C1TabItem.Header>
                <local:SalesPerMonth/>
            </c1:C1TabItem>
            <c1:C1TabItem  >
                <c1:C1TabItem.Header>
                    <TextBlock x:Name="salesPerSalesAgentTb" Text="Sales Per Sales Agent" Style="{StaticResource wideLayoutTextBlock}"/>
                </c1:C1TabItem.Header>
                <local:SalesPerAgents/>
            </c1:C1TabItem>
            <c1:C1TabItem x:Name="salesAgentsTbItem">
                <c1:C1TabItem.Header>
                    <TextBlock x:Name="salesAgentsTb" Text="Sales Agents" Style="{StaticResource wideLayoutTextBlock}"/>
                </c1:C1TabItem.Header>
                <local:SalesAgents />
            </c1:C1TabItem>
            <c1:C1TabItem>
                <c1:C1TabItem.Header>
                    <TextBlock x:Name="reportSummaryTb" Text="Report Summary" Style="{StaticResource wideLayoutTextBlock}"/>
                </c1:C1TabItem.Header>
                <local:ReportSummary/>
            </c1:C1TabItem>
        </c1:C1TabControl>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="salesPerMonthTb.Style" Value="{StaticResource narrowLayoutTextBlock}" />
                        <Setter Target="salesPerSalesAgentTb.Style" Value="{StaticResource narrowLayoutTextBlock}" />
                        <Setter Target="salesAgentsTb.Style" Value="{StaticResource narrowLayoutTextBlock}" />
                        <Setter Target="reportSummaryTb.Style" Value="{StaticResource narrowLayoutTextBlock}" />
                        <Setter Target="salesAgentsTbItem.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="480"></AdaptiveTrigger>
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>