WPF Tip: Create your own unique style

4 בדצמבר 2007

אין תגובות

When developing a new UserControls you usually would like to enable your own custom style, I found the following way very useful.


This example shows you how to create a Slider:


I used Microsoft Expression Design to create my own thumb for a Slider control.


After you had finished drawing your new Thumb, export the XAML using the Microsoft Expression Design.


Export using the following way:


exportXAML 


Select Resource dictionary, in the Group By select Layers this will export the Drawing Created by you into the XAML and will differentiate elements in the drawing by Layers. – Now you can use the drawing as a ResourceDictionary 


If you like to edit you drawing in Microsoft Expression Blend select the export to Canvas, select Export editable TextBlocks if your drawing contains Text.


1. Create your own ResourceDictionary and copy your XAML into it.


2. Copy the simple style User Control XAML into your ResourceDictionary. This is how it should look like: (I am only replacing the Thumb in the slider)



<Track.Thumb>


     <Thumb Style="{DynamicResource SimpleSliderThumb}"/>


</Track.Thumb>


        …


    <!–Simple Simple SliderThumb – The Thumb is the draggable part of a Slider–>


    <Style x:Key="SimpleSliderThumb" d:IsControlPart="True" TargetType="{x:Type Thumb}">


        <Setter Property="SnapsToDevicePixels" Value="true"/>


        <Setter Property="Height" Value="14"/>


        <Setter Property="Width" Value="14"/>


        <Setter Property="Template">


            <Setter.Value>


                <ControlTemplate TargetType="{x:Type Thumb}">


                    <Grid>


                        <Ellipse x:Name="Ellipse" Fill="{DynamicResource NormalBrush}"


                        Stroke="{DynamicResource NormalBorderBrush}" StrokeThickness="1"/>


                    </Grid>


                    <ControlTemplate.Triggers>


                        <Trigger Property="IsMouseOver" Value="True">


                            <Setter Property="Fill"
                                    Value
="{DynamicResource MouseOverBrush}"


                                    TargetName="Ellipse"/>


                        </Trigger>


                        <Trigger Property="IsEnabled" Value="false">


                            <Setter Property="Fill"
                                    Value
="
{DynamicResource DisabledBackgroundBrush}"


                            TargetName="Ellipse"/>


                        </Trigger>


                    </ControlTemplate.Triggers>


                </ControlTemplate>


            </Setter.Value>


        </Setter>


    </Style>



 


3. Now take your own custom style and replace the style relevant.




<RadialGradientBrush x:Key="Path1Brush" RadiusX="0.684617" RadiusY="0.684615"


Center="0.492308,1.16154"GradientOrigin="0.492308,1.16154">


  <RadialGradientBrush.RelativeTransform>


     <TransformGroup>


       <RotateTransform CenterX="0.492308" CenterY="1.16154" Angle="-90"/>


     </TransformGroup>


  </RadialGradientBrush.RelativeTransform>


    <GradientStop Color="#FFFF1313" Offset="0"/>


    <GradientStop Color="#FF9B4444" Offset="0.429688"/>


    <GradientStop Color="#FFF08787" Offset="1"/>


  </RadialGradientBrush>


  <RadialGradientBrush x:Key="Path2Brush" RadiusX="0.874381" RadiusY="0.488538"


    Center="0.4988,0.953051" GradientOrigin="0.4988,0.953051">


    <RadialGradientBrush.RelativeTransform>


     <TransformGroup>


       <RotateTransform CenterX="0.4988" CenterY="0.953051" Angle="-90"/>


     </TransformGroup>


     </RadialGradientBrush.RelativeTransform>


       <GradientStop Color="#00FFFCF9" Offset="0.68457"/>


       <GradientStop Color="#B8FFFFFF" Offset="1"/>


  </RadialGradientBrush>


<ControlTemplate TargetType="{x:Type Thumb}">


  <Grid>


    <Canvas Width="11.6" Height="11.6477" Background="Transparent" >


      <Path x:Name="Path1" Fill="{DynamicResource Path1Brush}" Width="11.6"


           Height="11.6" Canvas.Left="0" Canvas.Top="0.0477295" Stretch="Fill"


           Data="F1 M 5.80002,0.0477295C 9.00323,0.0477295 11.6,2.64435


           11.6,5.84775C 11.6,9.05096 9.00323,11.6477 5.80002,11.6477C 2.5968,


           11.6477 0,9.05096 0,5.84775C 0,2.64435 2.5968,0.0477295 5.80002,0.0477295"/>


      <Path x:Name="Path2" Fill="{DynamicResource Path2Brush}" Width="11.526"


        Height="6.43983" Canvas.Left="0.0370712" Canvas.Top="0" Stretch="Fill"


       Data="F1 M 5.80006,0C 8.98283,0 11.5631,2.58005 11.5631,5.76297C 11.5631,7.30338


        8.67518,5.44769 5.88872,5.49701C 2.91804,5.5495 0.0370712,


        7.40518 0.0370712,5.76297C 0.0370712,2.58005 2.61729,0 5.80006,0"/>


    </Canvas>


  </Grid>


  <ControlTemplate.Triggers>


    <Trigger Property="IsMouseOver" Value="True">


      <Setter Property="Fill" Value="{DynamicResource Path1Brush}" TargetName="Path1"/>


    </Trigger>


    <Trigger Property="IsEnabled" Value="false">


      <Setter Property="Fill" Value="{DynamicResource Path2Brush}" TargetName="Path2"/>


    </Trigger>


  </ControlTemplate.Triggers>


</ControlTemplate>


 


 


 


 


 


 


 


4. Link the ResourceDictionary to your Simple Style:


 


 


image


 


5. Create a slider and apply the style on to the slider like so:



<Slider HorizontalAlignment="Right" Margin="0,0,141,40" VerticalAlignment="Bottom"


  Width="177" x:Name="VistaSlider1" Style="{DynamicResource VistaSlider}">


  <Slider.Resources>


  <ResourceDictionary>


    <ResourceDictionary.MergedDictionaries>


    <ResourceDictionary Source="ResourceDictionary1.xaml"/>


   </ResourceDictionary.MergedDictionaries>


  </ResourceDictionary>


 </Slider.Resources>


</Slider>


You should end up with something looking like this:


VistaToolBar


Enjoy!


 

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים