Author: coder

Frame background, TabControl background

Posted on by coder 
   
    

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Microsoft.Samples.Graphics.Transforms.SampleViewer"
    Title="Transformations"
    xmlns:my="clr-namespace:Microsoft.Samples.Graphics.Transforms"
    xmlns:examples="Microsoft.Samples.Graphics.Transforms">

  <DockPanel Background="White">
    <TabControl Background="White"  BorderBrush="Orange">
    
      <TabItem Header="Transform Example">
        <Frame Background="White" Source="TransformExample.xaml">
        </Frame>
      </TabItem>  

      <TabItem Header="RotateTransform Example">
        <Frame Background="White" Source="RotateTransformExample.xaml">
        </Frame>
      </TabItem>  
      
      <TabItem Header="ScaleTransform Example">
        <TabControl>
          <TabItem Header="Basic Examples">
            <Frame Background="White" Source="ScaleTransformExample.xaml" />
          </TabItem>
         <TabItem Header="Animation Example">
            <Frame Background="White" Source="AnimatedScaleTransformExample.xaml" />
          </TabItem>        
        </TabControl>
      </TabItem>
      
      <TabItem Header="SkewTransform Example">
        <TabControl>
          <TabItem Header="Basic Examples">
            <Frame Background="White" Source="SkewTransformExample.xaml" />
          </TabItem>
         <TabItem Header="Animation Example">
            <Frame Background="White" Source="AnimatedSkewTransformExample.xaml" />
          </TabItem>        
        </TabControl>        
      </TabItem>  
      
      <TabItem Header="TranslateTransform Example">
        <Frame Background="White" Source="TranslateTransformExample.xaml">
        </Frame>
      </TabItem>       
      
      <TabItem Header="Interactive MatrixTransform Example">
        <Frame Background="White" Source="InteractiveMatrixTransformExample.xaml">
        </Frame>
      </TabItem>      
      
      <TabItem Header="TransformCollection Example">
        <Frame Background="White" Source="TransformCollectionExample.xaml">
        </Frame>
      </TabItem>       
    
    </TabControl>
  </DockPanel>
</Window>

TabControl and Frame source

Posted on by coder 
   
    
<Window  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.SampleViewer"
    Title="Opacity Masking Examples" >

  <TabControl>
    <TabItem Header="GradientBrush Example">
      <Frame Source="GradientBrushExample.xaml" />
    </TabItem>
    <TabItem Header="ImageBrush Example">
      <Frame Source="ImageBrushExample.xaml" />
    </TabItem>
    <TabItem Header="DrawingBrush Example">
      <Frame Source="DrawingBrushExample.xaml" />
    </TabItem>
  </TabControl>



</Window>

Style TabItem

Posted on by coder 


   
    

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="TabControlStyles.Page1">
  <Page.Resources>
    <Style TargetType="TabItem">
      <Setter Property="BorderThickness" Value="3"/>
      <Setter Property="BorderBrush" Value="Red"/>
      <Setter Property="Background" Value="LightBlue"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
      <Setter Property="HorizontalContentAlignment" Value="Center"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <Border>
              <Grid>
                <Grid>
                  <Border CornerRadius="3,3,0,0" Background="{TemplateBinding Background}" 
                       BorderBrush="{TemplateBinding BorderBrush}" 
                       BorderThickness="{TemplateBinding BorderThickness}"/>
                </Grid>
                <Border BorderThickness="{TemplateBinding BorderThickness}" 
                     Padding="{TemplateBinding Padding}">
                  <ContentPresenter ContentSource="Header" 
                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
              </Grid>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

  </Page.Resources>


  <StackPanel Background="Ivory">
    <TextBlock FontSize="24">Styled Tab Control</TextBlock>
    <TabControl Width="250">
      <TabItem Header="One">
        <Ellipse Width="200" Height="200" Fill="#CABCAB"/>
      </TabItem>
      <TabItem Header="Two">
        <Ellipse Width="200" Height="200" Fill="#BADDF00D"/>
      </TabItem>
      <TabItem Header="Three">
        <Ellipse Width="200" Height="200" Fill="#654321"/>
      </TabItem>
      <TabItem Header="Four">
        <Ellipse Width="200" Height="200" Fill="#123456"/>
      </TabItem>
      <TabItem Header="Five">
        <Ellipse Width="200" Height="200" Fill="#F11001"/>
      </TabItem>
    </TabControl>
  </StackPanel>


</Page>

Style a TabControl using templates for the TabControl and TabItem elements.

Posted on by coder 


   
    
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="TabControlStyles.Page1">
    <Page.Resources>
        <Style x:Key="{x:Type TabControl}" TargetType="{x:Type TabControl}">
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabControl">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">
                                <Border BorderThickness="{TemplateBinding BorderThickness}" 
                    BorderBrush="{TemplateBinding BorderBrush}">
                                    <Border Background="{TemplateBinding Background}">
                                        <ContentPresenter ContentSource="SelectedContent"/>
                                    </Border>
                                </Border>
                            </Border>
                            <TabPanel Grid.Row="0" IsItemsHost="true"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>


    <StackPanel Background="Ivory">
        <TextBlock FontSize="24">Styled Tab Control</TextBlock>
        <TabControl Width="250">
            <TabItem Header="One">
                <Ellipse Width="200" Height="200" Fill="#CABCAB"/>
            </TabItem>
        </TabControl>
    </StackPanel>


</Page>

TabItem Header

Posted on by coder 


   
    

<Window x:Class="SimpleStyles.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="SimpleStyles"
  Background="#F8F8F8">
  <ScrollViewer>
    <WrapPanel>
      <HeaderedItemsControl Header="TabControl">
        <StackPanel Orientation="Horizontal">
          <TabControl Margin="8" Height="100" Width="225">
            <TabItem Header="One" />
            <TabItem Header="Two" />
            <TabItem Header="Three" />
            <TabItem Header="Four" />
          </TabControl>
        </StackPanel>
      </HeaderedItemsControl>
   
    </WrapPanel>
  </ScrollViewer>
</Window>

Tab page headers

Posted on by coder 


   
     

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Center" VerticalAlignment="Center">
<TabControl>
  <TabItem Header="_Button">
    <Button>Click!</Button>
  </TabItem>
  <TabItem>
    <TabItem.Header>
      <TextBlock FontSize="18">
        <AccessText>_Text</AccessText>
      </TextBlock>
    </TabItem.Header>
    <TextBlock>Hello, world</TextBlock>
  </TabItem>
  <TabItem>
    <TabItem.Header>
      <Ellipse Fill="Blue" Width="30" Height="20" />
    </TabItem.Header>
    <StackPanel Orientation="Horizontal">
      <TextBlock>Ellipse:</TextBlock>
      <Ellipse Fill="Blue" Width="100" />
    </StackPanel>
  </TabItem>
</TabControl>
</Page>

Put Different Objects to TabItem

Posted on by coder 


   
      

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="Canvas Sample">

    <StackPanel>
        <TabControl MinHeight="500" MinWidth="400">
            <TabItem  Header="Canvas" IsSelected="True">
                <Canvas Height="400" Width="400">
                     <Rectangle Width="100" Height="100" Fill="red"/>
                </Canvas>
            </TabItem>
            <TabItem Header="XAML Markup">
                <TextBlock  xml:space="preserve">
                       &amp;lt;&amp;gt;
                </TextBlock>
            </TabItem>

            <TabItem  Header="Description">
                <StackPanel>
                    <TextBlock>Sample</TextBlock>
                </StackPanel>
            </TabItem>
        </TabControl>
        <TextBlock >All rights reserved.</TextBlock>
    </StackPanel>

</Page>