0

Хочу сделать что-то вроде таких кнопок вместо стандартных TabItem в TabControl.

введите сюда описание изображения

Переопределяю в стиле ContentControl для TabItem, но не могу понять, как сделать, чтобы ширина прямоугольника была чуть больше текста и вкладки находились рядом друг с другом? При таком стиле TabItem просто растягиваются на все окно.

введите сюда описание изображения

xaml:

    <Style TargetType="{x:Type TabControl}">
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Background" Value="#0099ff"/>
                <Setter Property="Foreground" Value="#0080d6"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="2*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Rectangle Grid.Column="0"
                                           Grid.ColumnSpan="2"
                                           Width="{TemplateBinding ActualWidth}"
                                           Height="{TemplateBinding ActualHeight, Converter={StaticResource HeightOffsetConverter}}"
                                           Fill="{TemplateBinding Foreground}"
                                           RadiusX="3"
                                           RadiusY="3"
                                           VerticalAlignment="Bottom"/>

                                <Rectangle Grid.Column="0"
                                           Grid.ColumnSpan="2"
                                           Width="{TemplateBinding ActualWidth}"
                                           Height="{TemplateBinding ActualHeight, Converter={StaticResource HeightOffsetConverter}}"
                                           Fill="{TemplateBinding Background}"
                                           RadiusX="3"
                                           RadiusY="3"
                                           VerticalAlignment="Top"/>

                                <TextBlock Grid.Column="0"
                                           Text="{TemplateBinding Header}"
                                           Foreground="White"/>

                                <Rectangle Grid.Column="0"
                                           Width="{TemplateBinding ActualWidth}"
                                           Height="{TemplateBinding ActualHeight, Converter={StaticResource HeightOffsetConverter}}"
                                           Fill="White"
                                           RadiusX="3"
                                           RadiusY="3"
                                           Opacity="0.1"
                                           VerticalAlignment="Top"/>
                                <Rectangle Grid.Column="1"
                                           Width="{TemplateBinding ActualWidth}"
                                           Height="{TemplateBinding ActualHeight, Converter={StaticResource HeightOffsetConverter}}"
                                           Fill="Black"
                                           RadiusX="3"
                                           RadiusY="3"
                                           Opacity="0.1"
                                           VerticalAlignment="Top"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

converter:

public class HeightOffsetConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (double)value - 2;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
2
  • Что означает «чтобы вкладки находились рядом друг с другом»? А сейчас как они находятся?
    – VladD
    27 ноя 2016 в 9:14
  • @VladD, Имел ввиду, чтобы они находились рядом в строку, а не в столбик, как на второй картинке.
    – trydex
    27 ноя 2016 в 9:15

1 ответ 1

1

Сделал так:

введите сюда описание изображения

xaml:

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Padding" Value="0,0,3,0" />
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Margin" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=TabControl}, Path=Padding}" />
                <Setter Property="Background" Value="#584a97"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <ControlTemplate.Resources>
                                <SolidColorBrush x:Key="DefaultColor" Color="#584a97" />
                                <SolidColorBrush x:Key="DarkColor" Color="{Binding Source={StaticResource DefaultColor}, 
                                                 Converter={StaticResource ColorLightConverter}, ConverterParameter=DARK}" />
                                <SolidColorBrush x:Key="LightColor" Color="{Binding Source={StaticResource DefaultColor}, 
                                                 Converter={StaticResource ColorLightConverter}, ConverterParameter=LIGHT}" />
                                <SolidColorBrush x:Key="SelectColor" Color="{Binding Source={StaticResource DefaultColor}, 
                                                 Converter={StaticResource ColorLightConverter}, ConverterParameter=SELECT}" />

                            </ControlTemplate.Resources>

                            <Border x:Name="body"
                                    Margin="{TemplateBinding Margin}"
                                    Background="{TemplateBinding Background}"
                                    CornerRadius="5">

                            <Grid Height="50" x:Name="grid">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <Border x:Name="textBorder"
                                        Grid.Column="0" 
                                        Padding="25,0"
                                        CornerRadius="5,0,0,5"
                                        Background="#0FFFFFFF">

                                        <TextBlock Text="{TemplateBinding Header, Converter={StaticResource StringUpperConverter}}"
                                                   Foreground="White"
                                                   VerticalAlignment="Center" />

                                    <Border.RenderTransform>
                                        <ScaleTransform ScaleY="0.9"/>
                                    </Border.RenderTransform>
                                </Border>

                                <Grid Grid.Column="1" x:Name="iconGrid">
                                    <Border Background="Black"
                                            Opacity="0.1"
                                            CornerRadius="0,5,5,0">
                                        <Border.RenderTransform>
                                            <ScaleTransform ScaleY="0.9"/>
                                        </Border.RenderTransform>
                                   </Border>
                                   <Image Source="Resources/setting.png" Height="30" 
                                           HorizontalAlignment="Center" 
                                           VerticalAlignment="Center"
                                           Margin="5,0,5,0" />
                                </Grid>
                            </Grid>
                            </Border>

                            <ControlTemplate.Triggers>
                               <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="body" Property="Background" Value="{Binding Background,
                                                                                RelativeSource={RelativeSource TemplatedParent},
                                                                                Converter={StaticResource ColorLightConverter},
                                                                                ConverterParameter=LIGHT}"/>
                                </Trigger>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="body" Property="Background" Value="{Binding Background,
                                                                                    RelativeSource={RelativeSource TemplatedParent},
                                                                                    Converter={StaticResource ColorLightConverter},
                                                                                    ConverterParameter=SELECT}"/>
                                    <Setter TargetName="body" Property="RenderTransform">
                                        <Setter.Value>
                                            <ScaleTransform ScaleY="0.93"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="body" Property="RenderTransform">
                                        <Setter.Value>
                                            <TranslateTransform Y="2"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

code-behind:

    public class StringUpperConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value.ToString().ToUpper();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}


public class ColorLightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        SolidColorBrush br = value as SolidColorBrush;

        float coef = 0;

        if (parameter != null)
        {
            switch (parameter.ToString().ToUpper())
            {
                case "DARK":
                    coef = 0.8F;
                    break;
                case "LIGHT":
                    coef = 1.4F;
                    break;
                case "SELECT":
                    coef = 1.6F;
                    break;
                default:
                    coef = 1.1F;
                    break;
            }
        }
        return Common.ChangeLightness(br.Color, coef);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

class Common
{
    public static Color ChangeLightness(Color color, float coef)
    {
        return Color.FromArgb(255, (byte)(color.R * coef), (byte)(color.G * coef),
        (byte)(color.B * coef));
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.