VPF::[WPF] ZIndex - Форум программистов

zaver

Дата 15.4.2008, 16:47 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 204
Регистрация: 15.8.2005

Репутация: нет
Всего: 3

Еще с времен WinForms интересовало как сделать такую вот штуку с кнопками (см. рис), т.е. так чтобы они накладывались по кругу.
С появлением супергибкого и универсального WPF надеюсь эту проблему решили, интересно вот КАК?

Это сообщение отредактировал(а) zaver - 15.4.2008, 16:47

Присоединённый файл ( Кол-во скачиваний: 68 )

Zindex.JPG 13,70 Kb

mr.DUDA

Дата 15.4.2008, 17:05 (ссылка)

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

Загрузка ...

3D-маньяк

Профиль
Группа: Экс. модератор
Сообщений: 8244
Регистрация: 27.7.2003
Где: город-герой Минск

Репутация: 1
Всего: 232

Одну из кнопок (ту что на самом верху) рисовать частично, чтобы был виден кусок самой "нижней" кнопки. Например, назначить градиентную кисть с 4мя точками градиента, с полной (Alpha=0) прозрачностью на двух последних точках:

Window1.xaml (кнопку стырил из туториала)

Код

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication3.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480" Background="#FF000000">
    <Window.Resources>
        <Style x:Key="BlackButton" BasedOn="{x:Null}" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Rectangle Stroke="{x:Null}" RadiusX="6.167" RadiusY="6.167" x:Name="rectangle">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.514,1.261" StartPoint="0.513,0.008">
                                        <GradientStop Color="#FF000000" Offset="0"/>
                                        <GradientStop Color="#FF656262" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle Stroke="{x:Null}" RadiusX="6.167" RadiusY="6.167" Margin="2,1,2,0">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.513,0.32" StartPoint="0.513,0.008">
                                        <GradientStop Color="#4BFFFFFF" Offset="0"/>
                                        <GradientStop Color="#00FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                        </Grid>
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Storyboard1">
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF000000"/>
                                    <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFEA860D"/>
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF656262"/>
                                    <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FF121209"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="Storyboard2">
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFEA860D"/>
                                    <SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#FF000000"/>
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF121209"/>
                                    <SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#FF656262"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource Storyboard2}" x:Name="Storyboard2_BeginStoryboard"/>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True"/>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <VisualBrush x:Key="VisualBrush1" Visual="{Binding ElementName=rectangle}"/>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Button Margin="245,138,247,0" Content="Button" Style="{DynamicResource BlackButton}" Foreground="#FFFFFFFF" VerticalAlignment="Top" Height="43"/>
        <Button Margin="198,185,294,215" Style="{DynamicResource BlackButton}" Content="Button" Foreground="#FFFFFFFF" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="-90.397"/>
                    <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
        <Button Margin="245,0,247,165" VerticalAlignment="Bottom" Height="43" Content="Button" Style="{DynamicResource BlackButton}" Foreground="#FFFFFFFF"/>
        <Button Margin="293,192,199,211" Content="Button" Style="{DynamicResource BlackButton}" Foreground="#FFFFFFFF" RenderTransformOrigin="0.5,0.5">
            <Button.OpacityMask>
                <LinearGradientBrush EndPoint="0.346,0.494" StartPoint="0.818,0.489">
                    <GradientStop Color="#00000000" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#00272727" Offset="0.156"/>
                    <GradientStop Color="#FF313131" Offset="0.196"/>
                </LinearGradientBrush>
            </Button.OpacityMask>
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="-90.689"/>
                    <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Window>

Кнопка справа - с полупрозрачной кистью и перекрывает сразу 2 кнопки - верхнюю и нижнюю, но верхнее перекрытие маскируется кистью.

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

zaver

Дата 15.4.2008, 17:50 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 204
Регистрация: 15.8.2005

Репутация: нет
Всего: 3

хм спасибо
а как это сделать с произвольным компонентом?
например с компонентом у которого есть какой-то контент и скролл?

mr.DUDA

Дата 15.4.2008, 18:09 (ссылка)

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

Загрузка ...

3D-маньяк

Профиль
Группа: Экс. модератор
Сообщений: 8244
Регистрация: 27.7.2003
Где: город-герой Минск

Репутация: 1
Всего: 232

zaver, да точно так же.
user posted image

Opacity Brush можно хоть на чёрта лысого навесить, поверх.

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

Kefir

Дата 15.4.2008, 21:57 (ссылка)

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

Загрузка ...

«Hakuna Matata»

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

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

mr.DUDA, в общем, чисто на вид оно может и работает smile

, но, увы, есть проблемы:
1) если кноки сделать полупрозрачными, то места пересечения должны буду накладываться, а в месте одного пересечения из-за маски этого наложения не будет (накладывать нечего В))
2) на мой взгляд, самое плохое - по-моему, маска не означает, что эта часть контрола теряет хит-тест. другими словами если навести на место пересечения - выделятся и кликаться будет по кнопке, у которой zindex больше.

А так - неплохо выкрутился smile

zaver, проблема в том, что так просто сделать такую штуку нельзя (чтобы для всех и сразу). Я имею в виду вариант без потери функционала и без "надувательства" системы.

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

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

mr.DUDA

Дата 16.4.2008, 09:36 (ссылка)

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

Загрузка ...

3D-маньяк

Профиль
Группа: Экс. модератор
Сообщений: 8244
Регистрация: 27.7.2003
Где: город-герой Минск

Репутация: 1
Всего: 232

Да, это фейк, не спорю smile

А вот попробуйте представить принцип такого "карусельного" наложения картинок - имхо это вообще невозможно без отрисовки по частям.

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

Kefir

Дата 16.4.2008, 10:36 (ссылка)

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

Загрузка ...

«Hakuna Matata»

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

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

Карусель делается, по-моему, следующим образом (вид сверху, чёрточки - это картинки):

Цитата

    __
  __  __
__    __
  __  __
    __

то биш

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

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

mr.DUDA

Дата 16.4.2008, 12:05 (ссылка)

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

Загрузка ...

3D-маньяк

Профиль
Группа: Экс. модератор
Сообщений: 8244
Регистрация: 27.7.2003
Где: город-герой Минск

Репутация: 1
Всего: 232

Kefir, я имею ввиду не 3-мерную карусель а наложение по принципу как у zaver - где нету "самого нижнего" и "самого верхнего" контрола, а каждый контрол перекрывает предыдущий в цепочке контрол и сам перекрывается следующим.

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

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