VPF::TabControl и его TabItems (стилизация элементов)

jonie

Дата 13.8.2010, 20:04 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 5613
Регистрация: 21.8.2005
Где: Владимир

Репутация: 2
Всего: 118

Решил попробывать WPF и столкнулся с порблемой отображения TabItem-ов:

Мне надо чтобы область (1) не перекрывалась Rectangle-ом (мне нужна закругления только в правой части)
и чтобы область (2) была заполнена желтым, включая красную границу (желтый-текущая активная владка).

В общем хочется как на срине чтобы вели себя TabItem-ы:

Вот то что я наковырял:

Код


<Window x:Class="WpfApplication1.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="600" Width="800">

    <Window.Resources>
        <ControlTemplate x:Key="RoundTab" TargetType="{x:Type TabItem}">
            <Border
                    x:Name="Spacer"
                    Width="Auto"
                    Height="Auto"
                    Padding="0 10 0 0"
                    Margin="0 0 20 0"
                    BorderBrush="Transparent"
                    BorderThickness="0">

                <Border BorderBrush="Black" BorderThickness="1,1,0,1">
                    <Border.CornerRadius>
                        <CornerRadius BottomLeft="9" TopLeft="9" />
                    </Border.CornerRadius>
                    <Grid SnapsToDevicePixels="True" Height="96" Width="237" HorizontalAlignment="Left" x:Name="Bd">
                        <Rectangle Stroke="Transparent" x:Name="rec" Fill="Red">
                        </Rectangle>
                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                      HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" 
                                      x:Name="Content" 
                                      VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" 
                                      Content="{TemplateBinding Header}" 
                                      ContentSource="Header" 
                                      ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                      RecognizesAccessKey="True"/>

                    </Grid>
                </Border>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger  Property="IsSelected" Value="True">
                    <Setter TargetName="Bd" Property="Margin" Value="0,0,0,0"/>
                    <Setter TargetName="rec" Property="Fill" Value="Yellow"/>
                </Trigger>
                <Trigger  Property="IsSelected" Value="False">
                    <Setter TargetName="Bd" Property="Margin" Value="0,0,0,0"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Margin="10">
        <DockPanel>


            <TabControl TabStripPlacement="Left" BorderBrush="Red" BorderThickness="1,1,1,1">

                <TabControl.Resources>
                    <Style TargetType="{x:Type TabItem}">

                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                        <Canvas>
                                            <Rectangle Width="800" Height="600" Margin="-2">
                                                <Rectangle.Fill>
                                                    <LinearGradientBrush MappingMode="Absolute" StartPoint="340,0" EndPoint="1200,0">
                                                        <LinearGradientBrush.GradientStops>
                                                            <GradientStop Offset="1.00" Color="#ffff9a11"/>
                                                            <GradientStop Offset="0.00" Color="#ffffffff"/>
                                                        </LinearGradientBrush.GradientStops>
                                                        <LinearGradientBrush.Transform>
                                                            <RotateTransform Angle="40" />
                                                        </LinearGradientBrush.Transform>
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                       
                                            <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}"/>
                                        </Canvas>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

                </TabControl.Resources>

                <TabItem Name="backgroundcolor2" Header="Tab1" Template="{StaticResource RoundTab}">
                    <TabPanel>
                        <Label>Tab1 content</Label>
                    </TabPanel>
                </TabItem>
                <TabItem Name="foregroundcolor2" Header="Tab2" Template="{StaticResource RoundTab}">
                    <Label>Tab2 content</Label>
                </TabItem>

            </TabControl>


        </DockPanel>
    </Grid>

</Window>

--------------------

Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...

Kefir

Дата 15.8.2010, 23:13 (ссылка)

(нет голосов)

Загрузка ...

«Hakuna Matata»

Профиль
Группа: Комодератор
Сообщений: 1878
Регистрация: 25.1.2003
Где: Tampere, Suomi

Репутация: 22
Всего: 87

Для того чтобы не перекрывалось - ставьте радиус закругления у бордера и прямоугольника в одинаковые значения или же оберните прямогольник этим бордером - тогда бордет будет сам всё обрезать.

Что касания залезания - на IsSelected просто ставьте отрицательный маргин. (это там же где и желтый вы ставите - маргин у вас там 0)

--------------------

.NET: WPF и Silverlight / Мой твиттер / Мой подкаст / Мой блог

jonie

Дата 15.8.2010, 23:36 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 5613
Регистрация: 21.8.2005
Где: Владимир

Репутация: 2
Всего: 118

Цитата

Для того чтобы не перекрывалось - ставьте радиус закругления у бордера и прямоугольника в одинаковые значения

да, я так пробывал - получалось везде закгулять, а не с конкретной стороны. Насчет обернуть бордером - попробую.

Цитата

Что касания залезания - на IsSelected просто ставьте отрицательный маргин. (это там же где и желтый вы ставите - маргин у вас там 0)

ну и это я пробывал делать, но возник вопрос в величине этого margin-а... Какой она должна быть и от чего зависит?

--------------------

Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...

jonie

Дата 16.8.2010, 14:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 5613
Регистрация: 21.8.2005
Где: Владимир

Репутация: 2
Всего: 118

ок, дошел до такого

Теперь не могу понять как сделать отступ в указанной позиции по неактивности... изменение margin элемента Name="Spacer" не работает 8((

Код


<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <ControlTemplate x:Key="RoundTab" TargetType="{x:Type TabItem}">
            <Border x:Name="Spacer" Width="Auto" Height="Auto" Padding="0 10 0 19" Margin="0 -12 -1 0" BorderBrush="Transparent" BorderThickness="0">
                <Border BorderBrush="Black" BorderThickness="1,1,0,1" ClipToBounds="True">
                    <Border.CornerRadius>
                        <CornerRadius BottomLeft="9" TopLeft="9" />
                    </Border.CornerRadius>
                    <Grid SnapsToDevicePixels="True" HorizontalAlignment="Left" x:Name="Bd" Height="96" Width="240">
                        <Border Name="mask" Background="White" BorderThickness="0">
                            <Border.CornerRadius>
                                <CornerRadius BottomLeft="9" TopLeft="9" />
                            </Border.CornerRadius>
                        </Border>
                        <Rectangle x:Name="rec">
                            <Rectangle.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=mask}"/>
                            </Rectangle.OpacityMask>
                            <Rectangle.Fill>
                                <LinearGradientBrush MappingMode="Absolute" StartPoint="0,-000" EndPoint="0,200">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="1.00" Color="#ffbcbeda"/>
                                        <GradientStop Offset="0.00" Color="#ffffffff"/>
                                    </LinearGradientBrush.GradientStops>
                                    <!--<LinearGradientBrush.Transform>
                                        <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,106.315,751.799" />
                                    </LinearGradientBrush.Transform>-->
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>

                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                      HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" 
                                      x:Name="Content" 
                                      VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" 
                                      Content="{TemplateBinding Header}" 
                                      ContentSource="Header" 
                                      ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                      RecognizesAccessKey="True"/>
                    </Grid>
                </Border>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger  Property="IsSelected" Value="True">
                    <Setter Property="Focusable" Value="False"/>
                    <Setter TargetName="rec" Property="Fill" Value="Transparent"/>
                    <!--<Setter TargetName="Bd" Property="Margin" Value="0,0,0,0"/>
                    <Setter TargetName="Spacer" Property="Margin" Value="0,0,-1,0"/> -->
                </Trigger>
                <Trigger  Property="IsSelected" Value="False">
                    <!-- <Setter TargetName="Bd" Property="Margin" Value="0,0,0,0"/> -->
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Page.Resources>
    <Grid x:Name="LayoutRoot">
        <DockPanel>


            <TabControl TabStripPlacement="Left" BorderBrush="#f86400" BorderThickness="1,1,1,1">

            
                <!-- Template="{StaticResource RoundTab}" -->

                <TabItem Name="backgroundcolor2" Header="Tab1" Template="{StaticResource RoundTab}">
                    <TabPanel>
                        <Label>Tab1 content</Label>
                    </TabPanel>
                </TabItem>
                <TabItem Name="foregroundcolor2" Header="Tab2" Template="{StaticResource RoundTab}">
                    <Label>Tab2 content</Label>
                </TabItem>

            </TabControl>


        </DockPanel>
    </Grid></Page>

--------------------

Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...

Kefir

Дата 16.8.2010, 15:53 (ссылка)

(нет голосов)

Загрузка ...

«Hakuna Matata»

Профиль
Группа: Комодератор
Сообщений: 1878
Регистрация: 25.1.2003
Где: Tampere, Suomi

Репутация: 22
Всего: 87

Удали Bd.HorizontalAlignment = Left или сделай заливку белым в другом месте +
Маргин Spacer = 0 -12 0 0
Маргин в сеттере = 0 -12 -1 0

--------------------

.NET: WPF и Silverlight / Мой твиттер / Мой подкаст / Мой блог

jonie

Дата 8.9.2010, 11:42 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 5613
Регистрация: 21.8.2005
Где: Владимир

Репутация: 2
Всего: 118

ну в общем получилось как-то так:

Код


<Window x:Class="FocusTab.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="392" Width="609">
    <Window.Resources>
        <CornerRadius x:Key="RoundedCorners" BottomLeft="9" TopLeft="9" BottomRight="0" TopRight="0"/>
        <ControlTemplate x:Key="RoundTab" TargetType="{x:Type TabItem}">
            <Border x:Name="MainBrd" ClipToBounds="True" Margin="0 -2 -1 5" CornerRadius="{StaticResource RoundedCorners}">
                <Border x:Name="LeftBrd" BorderBrush="Black" ClipToBounds="True" CornerRadius="{StaticResource RoundedCorners}" BorderThickness="2">
                    <Grid   SnapsToDevicePixels="True" 
                            Width="{Binding Path=Width, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"
                            Height="{Binding Path=Height, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}">
                        <Border Name="Mask" CornerRadius="{StaticResource RoundedCorners}" Background="White"/>
                        <Rectangle x:Name="Rect">
                            <Rectangle.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=Mask}"/>
                            </Rectangle.OpacityMask>
                            <Rectangle.Fill>
                                <LinearGradientBrush MappingMode="Absolute" StartPoint="0,-000" EndPoint="0,200">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="1.00" Color="#ffbcbeda"/>
                                        <GradientStop Offset="0.00" Color="#ffffffff"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                          HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" 
                                          x:Name="Content" 
                                          VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" 
                                          Content="{TemplateBinding Header}" 
                                          ContentSource="Header" 
                                          ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                          RecognizesAccessKey="True"/>
                    </Grid>
                </Border>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger  Property="IsSelected" Value="True">
                    <Setter TargetName="Rect" Property="Fill" Value="Transparent"/>
                    <Setter TargetName="LeftBrd" Property="BorderBrush" Value="White"/>
                    <Setter TargetName="MainBrd" Property="BorderThickness" Value="2 2 0 2"/>
                    <Setter TargetName="MainBrd" Property="BorderBrush" Value="Black"/>
                </Trigger>
                <Trigger  Property="IsSelected" Value="False">
                    <Setter TargetName="LeftBrd" Property="Margin" Value="0 0 5 0"/>
                    
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid Margin="10">
        <DockPanel>
            <TabControl TabStripPlacement="Left" BorderBrush="Black" BorderThickness="2" >
                <TabItem Header="Tab1" Template="{StaticResource RoundTab}" Width="200" Height="75">
                    <Label>Tab1 content</Label>        
                </TabItem>
                <TabItem Header="Tab2" Template="{StaticResource RoundTab}" Width="200" Height="75">
                    <Label>Tab2 content</Label>
                </TabItem>
                <TabItem Header="Tab3" Template="{StaticResource RoundTab}" Width="200" Height="75">
                    <Label>Tab3 content</Label>
                </TabItem>
                <TabItem Header="Tab4" Template="{StaticResource RoundTab}" Width="200" Height="75">
                    <Label>Tab4 content</Label>
                </TabItem>
                <TabItem Header="Tab5" Template="{StaticResource RoundTab}" Width="200" Height="75">
                    <Label>Tab5 content</Label>
                </TabItem>
            </TabControl>
        </DockPanel>
    </Grid>
</Window>

done.

--------------------

Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| WPF и Silverlight \| Следующая тема »