2 style w Slider Template :: 4programmers.net

2014-09-30T11:49:34+02:00

Rejestracja: dni
Ostatnio: dni

0

Witam serdecznie, potrzebuję zrobić UserControl opierając się na Sliderze. Stworzyłem swój template i dołączając go do Slidera jako styl, działa wszystko pięknie. Problem w tym, że muszę przenieść ten styl do UserControl i tutaj pojawia się problem, bo można zaaplikować tylko jeden.

Wcześniej to wyglądało (i działało) mniej więcej tak, że miałem plik ze stylami, a w nim:

<Style x:Key="HorizontalSliderThumbStyle" TargetType="{x:Type Thumb}">

(...)

Kopiuj

<Style x:Key="SliderStyle" TargetType="{x:Type Slider}">

Jak widac, są to dwa style, ale w sumie styluję jeden Slider.

Chcą to przenieść do UserControlki:

Kopiuj

<Slider.Template>
        <ControlTemplate TargetType="{x:Type Slider}">       
            <Thumb (...)> </Thumb>

Nie mogę dać drugiego stylu dla samego Slider'a. Jak rozwiązać ten problem?

DibbyDum

2014-09-30T13:10:45+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Polska, Kraków

1

Ale z tego co widzę to masz owszem dwa style ale oba mają inny TargetType. Więc to bardziej będzie coś w stylu:

Kopiuj

<Slider>
         <Slider.Template>
            <ControlTemplate TargetType="{x:Type Slider}">
               <Thumb>
                  <Thumb.Template>
                     <ControlTemplate TargetType="{x:Type Thumb}">
                        <!-- ... -->
                     </ControlTemplate>
                  </Thumb.Template>
               </Thumb>
            </ControlTemplate>
         </Slider.Template>
      </Slider>

2014-09-30T13:32:51+02:00

Rejestracja: dni
Ostatnio: dni

0

Masz rację, tak mam zrobione. Problem w tym, że element "ControlTemplate" nie może mieć więcej w sobie niż jednego elementu.

Kopiuj

		<Slider>
         <Slider.Template>
            <ControlTemplate TargetType="{x:Type Slider}">
               <Thumb>
                  <Thumb.Template>
                     <ControlTemplate TargetType="{x:Type Thumb}">
                        <!-- ... -->
                     </ControlTemplate>
                  </Thumb.Template>
               </Thumb>
            </ControlTemplate>
         </Slider.Template>
      </Slider>

Mam styl dla Thumb'a i co dalej ze Sliderem (który de'facto definiuje mój pasek)? Nie mam jak go umieścić. Wyżej dałem identyczny przykład jak Twój, tylko nie wkleiłem całego.

2014-09-30T13:48:25+02:00

Rejestracja: dni
Ostatnio: dni

0

Do tego co podałeś, potrzebuję "dołożyć" to co umieszczam niżej:

Kopiuj

<Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
            <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#FFC4C4C4"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Slider}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>
                                <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
                                <Border x:Name="TrackBackground"  Background="#aec664" CornerRadius="3" Height="5.0" Margin="5,0" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center">
                                    <Border.Width>
                                        <MultiBinding Converter="{StaticResource TestConv}" >
                                            <Binding Path="Value" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Slider}}" />
                                            <Binding Path="Maximum" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Slider}}" />
                                            <Binding Path="Width" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Slider}}" />
                                        </MultiBinding>
                                    </Border.Width>
                                    <Canvas Margin="-6,-1">
                                        <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0" Visibility="Hidden"/>
                                    </Canvas>              
                                </Border>
                                <Track x:Name="PART_Track" Grid.Row="1">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb x:Name="Thumb" Style="{StaticResource HorizontalSliderThumbStyle}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TickPlacement" Value="TopLeft">
                                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                                <Setter Property="Style" TargetName="Thumb" Value="{StaticResource HorizontalSliderUpThumbStyle}"/>
                                <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/>
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="BottomRight">
                                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                                <Setter Property="Style" TargetName="Thumb" Value="{StaticResource HorizontalSliderDownThumbStyle}"/>
                                <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/>
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="Both">
                                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="IsSelectionRangeEnabled" Value="true">
                                <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Slider}">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <TickBar x:Name="TopTick" Grid.Column="0" Fill="{TemplateBinding Foreground}" Placement="Left" Visibility="Collapsed" Width="4"/>
                                        <TickBar x:Name="BottomTick" Grid.Column="2" Fill="{TemplateBinding Foreground}" Placement="Right" Visibility="Collapsed" Width="4"/>
                                        <Border x:Name="TrackBackground" BorderBrush="{StaticResource VerticalSliderTrackNormalBorder}" BorderThickness="1" Background="{StaticResource HorizontalSliderTrackNormalBackground}" Grid.Column="1" CornerRadius="1" HorizontalAlignment="center" Margin="0,5" Width="4.0">
                                            <Canvas Margin="-1,-6">
                                                <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0" Visibility="Hidden" Width="4.0"/>
                                            </Canvas>
                                        </Border>
                                        <Track x:Name="PART_Track" Grid.Column="1">
                                            <Track.DecreaseRepeatButton>
                                                <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
                                            </Track.DecreaseRepeatButton>
                                            <Track.IncreaseRepeatButton>
                                                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
                                            </Track.IncreaseRepeatButton>
                                            <Track.Thumb>
                                                <Thumb x:Name="Thumb" Style="{StaticResource VerticalSliderThumbStyle}"/>
                                            </Track.Thumb>
                                        </Track>
                                    </Grid>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="TickPlacement" Value="TopLeft">
                                        <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                                        <Setter Property="Style" TargetName="Thumb" Value="{StaticResource VerticalSliderLeftThumbStyle}"/>
                                        <Setter Property="Margin" TargetName="TrackBackground" Value="2,5,0,5"/>
                                    </Trigger>
                                    <Trigger Property="TickPlacement" Value="BottomRight">
                                        <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                                        <Setter Property="Style" TargetName="Thumb" Value="{StaticResource VerticalSliderRightThumbStyle}"/>
                                        <Setter Property="Margin" TargetName="TrackBackground" Value="0,5,2,5"/>
                                    </Trigger>
                                    <Trigger Property="TickPlacement" Value="Both">
                                        <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                                        <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="IsSelectionRangeEnabled" Value="true">
                                        <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="IsKeyboardFocused" Value="true">
                                        <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

DibbyDum

2014-09-30T14:35:33+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Polska, Kraków

0

Okej to może inaczej ciężko mi podpiąć ten twój styl bo dużo w nim brakuje innych stylów. Ale analogiczny przykład mam styl dla Slider i styl dla Thumb, oraz samo wywołanie.
A więc cały kod:

Kopiuj

<UserControl x:Class="WpfApplication1.Test"
             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="300" d:DesignWidth="300">
   <UserControl.Resources>
      <Style x:Key="ThumbBall" TargetType="{x:Type Thumb}">
         <Setter Property="SnapsToDevicePixels" Value="true" />
         <Setter Property="OverridesDefaultStyle" Value="true" />
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate>
                  <Path StrokeThickness="0.550000" Stroke="#FFA2A2A2" StrokeMiterLimit="1.000000"
                        Data="F1 M 0,3.455078 C 0,1.615723 1.490234,0.125000 3.330078,0.125000 C 5.168945,0.125000 6.659179,1.615723 6.659179,3.455078 C 6.659179,5.292969 5.168945,6.784180 3.330078,6.784180 C 1.490234,6.784180 0,5.292969 0,3.455078 Z"
                        x:Name="TrackBall" Opacity="0.75" Fill="{DynamicResource MouseOverBrush}" />
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="TrackBall" Property="Opacity" Value="1" />
                     </Trigger>
                     <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="TrackBall" Property="Opacity" Value="0.7" />
                     </Trigger>
                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
      <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type Slider}">
                  <Grid>
                     <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}" />
                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
                     <!--<Path Margin="0,0,0,0" Grid.Row="1" Fill="{DynamicResource SliderTrack}" Data="F1 M 0,2.701660 L 0,4.179688 L 970.306641,4.179688 L 970.306641,2.701660 L 0,2.701660 Z" />-->
                     <Rectangle Stretch="Fill" Grid.Row="1" Height="2" Fill="{DynamicResource SliderTrack}" />
                     <Track Grid.Row="1" Name="PART_Track" Visibility="Visible">
                        <Track.DecreaseRepeatButton>
                           <RepeatButton Visibility="Hidden"
                                         Command="Slider.DecreaseLarge" />
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                           <Thumb Margin="15,0,15,0" Style="{StaticResource ThumbBall}" />
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                           <RepeatButton Visibility="Hidden"
                                         Command="Slider.IncreaseLarge" />
                        </Track.IncreaseRepeatButton>
                     </Track>
                  </Grid>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </UserControl.Resources>
   <Grid>
      <Slider Style="{StaticResource SliderStyle}" Width="500" Height="100" />
   </Grid>
</UserControl>

Style pożyczyłem z:
http://tlo.googlecode.com/svn/trunk/GenArtWPF/source/GenArt.Client/Resources/ControlTemplates/Slider.xaml
http://tlo.googlecode.com/svn/trunk/GenArtWPF/source/GenArt.Client/Resources/ColorsAndBrushes.xaml <-- Zmieniłem tylko dwa kolory dla paska i kulki.

Efekt:

2014-09-30T18:02:27+02:00

Rejestracja: dni
Ostatnio: dni

0

Zostawię właśnie w podany przez Ciebie sposób... początkowo miałem zamysł, żeby dziedziczyć po Slider, a nie UserControl. Chciałem tak zrobić dlatego, że wtedy wszystkie metody są ładnie wystawione. Ale nie będę siedział nad tym 3 dni, bo mam małe doświadczenie, a czas mnie trochę goni.

DibbyDum

2014-09-30T18:15:30+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Polska, Kraków

0

Nie rozumiem co masz na myśli wszystkie metody są ładnie wystawione. Ale dodał bym te style do App.xaml Application.Resources, a jeśli masz parę wersji tego stylu to rozbił bym go wedle potrzeby na mniejsze części i dodał dziedziczenie i wykorzystywał w zależności od potrzeb.

2014-09-30T22:22:56+02:00

Rejestracja: dni
Ostatnio: dni

0

Nie chcę Ci zawracać głowy.

Chciałem mieć coś takiego:

Kopiuj

<Slider x:Class="WpfApplication1.Test"
             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="300" d:DesignWidth="300">
   <Slider.Resources>
      
   </Slider.Resources>
   <Grid>
      <Slider Style="{StaticResource SliderStyle}" Width="500" Height="100" />
   </Grid>
</Slider>

I teraz w kodzie reużywając tego miałbym np.:

<c:MySlider Width=100 Max=10 SelectionStart=......

A robiąc zwykłą UserControl co najwyżej mogę te właściwości po kolei opakować lub nadać name w środku user Controlki o odwoływać się:

Kopiuj

<c:MySlider Slider.Width=100..... .

DibbyDum

2014-09-30T22:47:31+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Polska, Kraków

0

Na podstawie mojego przykładu

New Item -> Custom Control ja sobie nazwałem to MySlider.cs
W Themes pojawi się cos takiego jak Generic.xaml
A tam coś takiego jak <Style TargetType="{x:Type local:MySlider}"> tutaj wrzucam Setter z mojego <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
Tutaj wszystkie StaticResource zamien na DynamicResource przynajmniej mnie się zwykle pluje o to.
Dla ułatwienia do App.xaml -> Application.Recures dodaje mój <Style x:Key="ThumbBall" TargetType="{x:Type Thumb}"> bo nie można go dodać do Generic.xaml.
W MySlider.cs zamieniam public class MySlider : Control na public class MySlider : Slider

I teraz powinieneś móc używać tej kontrolki tak jak opisałeś w przykładzie powyżej.