TabControl in WPF C#/VB.NET
 |
| TabControl in WPF |
TabControl has set of tabs. Its mainly used to view multiple sections/categories in the same page.
This example has 7 tabs(7wonders). Each tab speaks about one wonders of the world.
Step 1) Drag & Drop TabControl
add as many TabItems
<TabControl>
<TabItem Header="Taj Mahal"/>
<TabItem Header="Colosseum"/>
</TabControl>
Step 2) Create Styles for each tab header
<Style x:Key="tabForeKey" TargetType="TabItem">
<Setter Property="FontWeight" Value="ExtraBold"></Setter>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.89,0.99">
<GradientStop Color="teal" Offset="0.23"></GradientStop>
<GradientStop Color="Green" Offset="0.56"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
Step 3) Create Styles to Content in Each TabItem
<Style x:Key="textForeKey" TargetType="TextBlock">
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.89,0.99">
<GradientStop Color="Gold" Offset="0.23"></GradientStop>
<GradientStop Color="Goldenrod" Offset="0.56"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
Step 4) Apply Styles to TabItem Header
<TabItem Header="Taj Mahal(India)"
FontFamily="fonts/tullyshandregular.ttf#TullysHand"
Style="{StaticResource tabForeKey}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
>
Step 5) Apply Styles to Content in TabItem
<TextBlock Grid.Column="01" Grid.Row="0"
FontFamily="Baris Cerin Regular" FontSize="16" TextWrapping="Wrap"
Style="{StaticResource textForeKey}" >
Step 6) Run The Application
Without Creating Resources also We can create tabcontrol in WPF/XAML
Note: This example uses Multiline Textblock ,ScrollViewer, and Grid Layout
<Page x:Class="Wpfone.tabcontrol_demo1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="500"
Title="tabcontrol_demo1">
<Grid>
<Grid.Resources>
<Style x:Key="textForeKey" TargetType="TextBlock">
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.89,0.99">
<GradientStop Color="Gold" Offset="0.23"></GradientStop>
<GradientStop Color="Goldenrod" Offset="0.56"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="tabForeKey" TargetType="TabItem">
<Setter Property="FontWeight" Value="ExtraBold"></Setter>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.89,0.99">
<GradientStop Color="teal" Offset="0.23"></GradientStop>
<GradientStop Color="Green" Offset="0.56"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="Tab Control Demo in WPF"
Grid.Column="0" Grid.Row="0"
Style="{StaticResource textForeKey}"
FontFamily="times"
FontSize="20"
Background="teal"
></TextBlock>
<TabControl Grid.Column="0" Grid.Row="1" x:Name="SevenWondersTabControl1" HorizontalAlignment="Left"
Height="500" VerticalAlignment="Top" Width="455">
<TabControl.Resources>
</TabControl.Resources>
<TabItem Header="Taj Mahal(India)"
FontFamily="fonts/tullyshandregular.ttf#TullysHand"
Style="{StaticResource tabForeKey}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0"
Source="http://tinyurl.com/az89umz" />
<ScrollViewer Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="01" Grid.Row="0"
FontFamily="Baris Cerin Regular" FontSize="16" TextWrapping="Wrap"
Style="{StaticResource textForeKey}"
>
<Run>
The Taj Mahal (/ˈtɑːdʒ məˈhɑːl/ often pron.: /ˈtɑːʒ/;[1] Hindi: ताज महल, from Persian/Urdu:
تاج محل "crown of palaces", pronounced
</Run>
<LineBreak/>
<Run>[ˈt̪aːdʒ mɛˈɦɛl]; also "the Taj"[2]) is a white marble mausoleum located in Agra,
Uttar Pradesh, India. It was built by Mughal emperor Shah Jahan in </Run>
<LineBreak></LineBreak>
<Run>
memory of his third wife, Mumtaz Mahal. The Taj Mahal is widely recognized as
"the jewel of Muslim art in India and one of the universally</Run>
<LineBreak></LineBreak>
<Run>
admired masterpieces of the world's heritage"
</Run>
</TextBlock>
</ScrollViewer>
</Grid>
</TabItem>
<TabItem Header="Chichen Itza(Mexico)"
FontFamily="fonts/tullyshandregular.ttf#TullysHand"
Style="{StaticResource tabForeKey}" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0"
Source="http://tinyurl.com/akox5pv" />
<ScrollViewer Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="01" Grid.Row="0"
FontFamily="Baris Cerin Regular" FontSize="16" TextWrapping="Wrap"
Style="{StaticResource textForeKey}"
>
<Run>
Chichen Itza was a major focal point in the northern Maya lowlands from the Late Classic (c.600–900 AD)
through the Terminal Classic (c.800–900) and into the early portion of the Early Postclassic period (c.900–1200).
The site exhibits a multitude of architectural styles, reminiscent of styles
</Run>
<LineBreak/>
<Run>
seen in central Mexico and of the Puuc and Chenes styles of the northern Maya lowlands.
The presence of central Mexican styles was once thought to have been representative of
direct migration or even conquest from central Mexico, but most contemporary interpretations view the
</Run>
<LineBreak></LineBreak>
<Run>
presence of these non-Maya styles more as the result of cultural diffusion.
</Run>
<LineBreak></LineBreak>
</TextBlock>
</ScrollViewer>
</Grid>
</TabItem>
<TabItem Header="Christ the Redeemer(Brazil)"
FontFamily="fonts/tullyshandregular.ttf#TullysHand"
Style="{StaticResource tabForeKey}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0"
Source="http://tinyurl.com/alrn7ut" />
<ScrollViewer Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="01" Grid.Row="0"
FontFamily="Baris Cerin Regular" FontSize="16" TextWrapping="Wrap"
Style="{StaticResource textForeKey}"
>
<Run>
The Cristo Redentor (English: lit. Christ the Redeemer, Portuguese: Cristo Redentor, standard) is a statue of
Jesus of Nazareth in Rio de Janeiro, Brazil; considered the largest Art Deco statue in
the world and the 5th largest statue of Jesus in the world. It is 30.1 metres (99 ft)
</Run>
<LineBreak/>
<Run>
tall, not including its 9.5 metres (31 ft) pedestal, and 30 metres (98 ft) wide. It weighs 635 tonnes
(625 long,700 short tons), and is located at the peak of the 700-metre (2,300 ft)
Corcovado mountain in the Tijuca Forest National Park overlooking the city.
</Run>
<LineBreak></LineBreak>
<Run>
A symbol of Brazilian Christianity, the statue has become an icon for Rio de Janeiro and Brazil.[1]
It is made of reinforced concrete and soapstone, and was constructed between
1922 and 1931.[2][3][4]
</Run>
<LineBreak></LineBreak>
</TextBlock>
</ScrollViewer>
</Grid>
</TabItem>
<TabItem Header="Colosseum(Italy)"
FontFamily="fonts/tullyshandregular.ttf#TullysHand"
Style="{StaticResource tabForeKey}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0"
Source="http://tinyurl.com/b899lh8" />
<ScrollViewer Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="01" Grid.Row="0"
FontFamily="Baris Cerin Regular" FontSize="16" TextWrapping="Wrap"
Style="{StaticResource textForeKey}"
>
<Run>
The Colosseum, or the Coliseum, originally the Flavian Amphitheatre (Latin: Amphitheatrum Flavium, Italian
Anfiteatro Flavio or Colosseo), is
</Run>
<LineBreak/>
<Run>
an elliptical amphitheatre in the centre of the city of Rome, Italy, the largest ever built
in the Roman Empire, built of concrete and stone.[1] It is
</Run>
<LineBreak></LineBreak>
<Run>
considered one of the greatest works of Roman architecture and Roman engineering.
</Run>
<LineBreak></LineBreak>
</TextBlock>
</ScrollViewer>
</Grid>
</TabItem>
<TabItem Header="Great Wall of China(China)"
FontFamily="fonts/tullyshandregular.ttf#TullysHand"
Style="{StaticResource tabForeKey}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0"
Source="http://tinyurl.com/acryvu4" />
<ScrollViewer Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="01" Grid.Row="0"
FontFamily="Baris Cerin Regular" FontSize="16" TextWrapping="Wrap"
Style="{StaticResource textForeKey}"
>
<Run>
The Great Wall of China is a series of fortifications made of stone, brick, tamped earth,
wood, and other materials, generally built along an east-to-west line across the historical
northern borders of China in part to protect the Chinese Empire or its prototypical
states against intrusions by various nomadic groups or military incursions by various
warlike peoples or forces. Several walls were being built as early as the 7th century
</Run>
<LineBreak/>
<Run>
BC;[3] these, later joined together and made bigger, stronger, and unified are now collectively
referred to as the Great Wall.[4] Especially famous is the wall built between
</Run>
<LineBreak></LineBreak>
<Run>
220–206 BC by the first Emperor of China, Qin Shi Huang. Little of that wall remains. Since then,
</Run>
<LineBreak></LineBreak>
<Run>
the Great Wall has on and off been rebuilt, maintained, and enhanced; the majority of the
existing wall was reconstructed during the Ming Dynasty.
</Run>
</TextBlock>
</ScrollViewer>
</Grid>
</TabItem>
<TabItem Header="Machu Picchu(Peru)"
FontFamily="fonts/tullyshandregular.ttf#TullysHand"
Style="{StaticResource tabForeKey}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0"
Source="http://tinyurl.com/arcdxab" />
<ScrollViewer Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="01" Grid.Row="0"
FontFamily="Baris Cerin Regular" FontSize="16" TextWrapping="Wrap"
Style="{StaticResource textForeKey}"
>
<Run>
Machu Picchu (Spanish pronunciation: [ˈmatʃu ˈpiktʃu], Quechua: Machu Picchu [ˈmɑtʃu ˈpixtʃu], "Old Peak")
is a pre-Columbian 15th-century Inca
</Run>
<LineBreak/>
<Run>
site located 2,430 metres (7,970 ft) above sea level.[1][2] Machu Picchu is located in the Cusco Region of Peru,
South America. It is situated on a mountain ridge above the Urubamba Valley in Peru, which is 80 kilometres (50 mi)
northwest of Cusco and through which the Urubamba River
</Run>
<LineBreak></LineBreak>
<Run>
flows. Most archaeologists believe that Machu Picchu was built as an estate for the
Inca emperor Pachacuti (1438–1472). Often referred to as the "City of the Incas",
it is perhaps the most familiar icon of Inca civilization.
</Run>
<LineBreak></LineBreak>
</TextBlock>
</ScrollViewer>
</Grid>
</TabItem>
<TabItem Header="Petra(Jordan)"
FontFamily="fonts/tullyshandregular.ttf#TullysHand"
Style="{StaticResource tabForeKey}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0"
Source="http://tinyurl.com/atflxrd" />
<ScrollViewer Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="01" Grid.Row="0"
FontFamily="Baris Cerin Regular" FontSize="16" TextWrapping="Wrap"
Style="{StaticResource textForeKey}"
>
<Run>
Petra (Greek πέτρα (petra), meaning 'stone'; Arabic: البتراء, Al-Batrāʾ) is an
Arabian historical and archaeological city in the Jordanian governorate of
</Run>
<LineBreak/>
<Run>Ma'an, that is famous for its rock-cut architecture and water conduit system.</Run>
<LineBreak></LineBreak>
</TextBlock>
</ScrollViewer>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Page>
No comments:
Post a Comment