Модераторы: gambit, Kefir, Partizan
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> TabControl и его TabItems (стилизация элементов) 
V
    Опции темы
jonie
Дата 13.8.2010, 20:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


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

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



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


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

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

<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>




--------------------
Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...
PM MAIL Jabber   Вверх
Kefir
Дата 15.8.2010, 23:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


«Hakuna Matata»
***


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

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



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

Что касания залезания - на IsSelected просто ставьте отрицательный маргин. (это там же где и желтый вы ставите - маргин у вас там 0)
PM MAIL WWW Skype   Вверх
jonie
Дата 15.8.2010, 23:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


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

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



Цитата

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

Цитата

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


--------------------
Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...
PM MAIL Jabber   Вверх
jonie
Дата 16.8.2010, 14:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


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

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



ок, дошел до такого
user posted image
Теперь не могу понять как сделать отступ в указанной позиции по неактивности... изменение 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>



--------------------
Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...
PM MAIL Jabber   Вверх
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
PM MAIL WWW Skype   Вверх
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.


--------------------
Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...
PM MAIL Jabber   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | WPF и Silverlight | Следующая тема »


 




[ Время генерации скрипта: 0.0985 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.