Click here to Skip to main content
15,886,724 members
Search within:


Articles / Desktop Programming / WPF
 

Conceptual Children: A powerful new concept in WPF

Rate me:
Please Sign up or sign in to vote.
5.00/5 (34 votes)
6 Apr 2008BSD32 min read 218.5K   3.2K   122  
This article describes a new approach by which an element can remove its visual and logical relationships to its children while maintaining a conceptual parental relationship with those children.
 
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
  <!-- 
  I copied this Aqua Button style from http://feebdack.com/xamlaqua
  and then tweaked it a little bit.
  -->

  <Style TargetType="{x:Type RepeatButton}" BasedOn="{x:Null}">
    <Setter Property="Width" Value="80" />    
    <Setter Property="FontSize" Value="40" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="FontFamily" Value="Courier New" />
    
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Focusable" Value="False" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />    
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type RepeatButton}">
          <Viewbox x:Name="XAquaBtnViewbox_Template" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
            <Viewbox.RenderTransform>
              <TransformGroup>
                <TranslateTransform X="0" Y="0"/>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
                <TranslateTransform X="0" Y="0"/>
              </TransformGroup>
            </Viewbox.RenderTransform>
            <Canvas x:Name="XAquaBtnCanvas_Template" Width="76" Height="23" Canvas.Left="0" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
              <Rectangle x:Name="XAquaBase_Template" RadiusX="12.5" RadiusY="12.5" Width="76" Height="23" Canvas.Left="0" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <LinearGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="0" Y="0"/>
                      </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0.9, 0.0168135613, 0.0737354159, 0.24450098" Offset="0.051948051948051951"/>
                        <GradientStop Color="sc#0.9, 0.2777778, 0.4555555, 0.7222222" Offset="0"/>
                        <GradientStop Color="sc#0.1, 0.0168135613, 0.0737354159, 0.24450098" Offset="0.75974025974025972"/>
                        <GradientStop Color="sc#0.9, 0.0168135613, 0.0737354159, 0.24450098" Offset="0.9285714285714286"/>
                        <GradientStop Color="sc#0.9, 0.0168073736, 0.0742135048, 0.2462013" Offset="0.50649350649350644"/>
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.OpacityMask>
                  <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                    <RadialGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="0.72247896527983591" ScaleY="0.58503147126665256"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="-0.01204594665762436" Y="0.15878049597621421"/>
                      </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <RadialGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0.5, 0, 0, 0" Offset="0"/>
                        <GradientStop Color="sc#1, 0, 0, 0" Offset="1"/>
                      </GradientStopCollection>
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </Rectangle.OpacityMask>
              </Rectangle>
              <Rectangle x:Name="XAquaCaustic_Template" RadiusX="12.5" RadiusY="12.5" Width="76" Height="23" Canvas.Left="0" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <LinearGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="0" Y="0"/>
                      </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0.9, 0.6, 0.879999936, 1" Offset="0.64935064935064934"/>
                        <GradientStop Color="sc#0.8, 0.278, 0.322400063, 0.722" Offset="0"/>
                        <GradientStop Color="sc#0.1, 0.278, 0.455599934, 0.722" Offset="1"/>
                        <GradientStop Color="sc#0.7, 0.100000024, 0.72999984, 1" Offset="0.87012987012987009"/>
                        <GradientStop Color="sc#0.33, 0.200000048, 0.5199999, 1" Offset="0.42207792207792205"/>
                        <GradientStop Color="sc#0.9, 0.16, 0.28, 0.640000045" Offset="0.31168831168831168"/>
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.OpacityMask>
                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <LinearGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="-0.0010964912280702452" Y="-0.0036231884057970273"/>
                      </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0, 0, 0, 0" Offset="0.98051948051948057"/>
                        <GradientStop Color="sc#0, 0, 0, 0" Offset="0.025974025974025976"/>
                        <GradientStop Color="sc#0.8, 0, 0, 0" Offset="0.16883116883116883"/>
                        <GradientStop Color="sc#0.8, 0, 0, 0" Offset="0.83766233766233766"/>
                        <GradientStop Color="sc#1, 0, 0, 0" Offset="0.5"/>
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.OpacityMask>
              </Rectangle>
              <Ellipse x:Name="XAquaLeftCap_Template" Width="23" Height="23" Canvas.Left="0" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
                <Ellipse.Fill>
                  <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                    <RadialGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0.1, 0, 0.6999998, 1" Offset="0.12987012987012986"/>
                        <GradientStop Color="sc#0.9, 0.0168135613, 0.0737354159, 0.24450098" Offset="0.88311688311688308"/>
                        <GradientStop Color="sc#0.9, 0.509040058, 0.584520042, 0.81096" Offset="0.98051948051948057"/>
                        <GradientStop Color="sc#0.8, 0.0270000026, 0.058531668, 0.153000012" Offset="0.76623376623376627"/>
                        <GradientStop Color="sc#0.6, 0.02, 0.0600000024, 0.18" Offset="0.54545454545454541"/>
                      </GradientStopCollection>
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </Ellipse.Fill>
                <Ellipse.OpacityMask>
                  <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0,1">
                    <RadialGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="60"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="5.5511151231257827E-17" Y="5.5511151231257827E-17"/>
                      </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <RadialGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0, 0, 0, 0" Offset="0.88311688311688308"/>
                        <GradientStop Color="sc#1, 0, 0, 0" Offset="0.44155844155844154"/>
                        <GradientStop Color="sc#0.66, 0, 0, 0" Offset="0.69480519480519476"/>
                      </GradientStopCollection>
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </Ellipse.OpacityMask>
              </Ellipse>
              <Ellipse x:Name="XAquaRightCap_Template" HorizontalAlignment="Stretch" Width="23" Height="23" Canvas.Left="53" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
                <Ellipse.Fill>
                  <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                    <RadialGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0.1, 0, 0.6999998, 1" Offset="0.12987012987012986"/>
                        <GradientStop Color="sc#0.9, 0.0168135613, 0.0737354159, 0.24450098" Offset="0.88311688311688308"/>
                        <GradientStop Color="sc#0.9, 0.509040058, 0.584520042, 0.81096" Offset="0.98051948051948057"/>
                        <GradientStop Color="sc#0.8, 0.0270000026, 0.058531668, 0.153000012" Offset="0.76623376623376627"/>
                        <GradientStop Color="sc#0.6, 0.02, 0.0600000024, 0.18" Offset="0.54545454545454541"/>
                      </GradientStopCollection>
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </Ellipse.Fill>
                <Ellipse.OpacityMask>
                  <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0,1">
                    <RadialGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="195"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="0" Y="-3.3306690738754696E-16"/>
                      </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <RadialGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0, 0, 0, 0" Offset="0.88311688311688308"/>
                        <GradientStop Color="sc#1, 0, 0, 0" Offset="0.44155844155844154"/>
                        <GradientStop Color="sc#0.66, 0, 0, 0" Offset="0.69480519480519476"/>
                      </GradientStopCollection>
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </Ellipse.OpacityMask>
              </Ellipse>
              <ContentPresenter Canvas.Top="3.75" Height="23" Width="76" TextBlock.TextAlignment="Center" TextBlock.FontFamily="Arial Black" TextBlock.FontSize="13" TextBlock.FontWeight="Normal" TextBlock.Foreground="Black">
                <ContentPresenter.BitmapEffect>
                  <DropShadowBitmapEffect Color="Black" Direction="270" Opacity="0.33" ShadowDepth="2" Softness="0" />
                </ContentPresenter.BitmapEffect>
              </ContentPresenter>
              <Path x:Name="XAquaHighlight1" Width="68" Height="8" Canvas.Left="4" Canvas.Top="0.75" RenderTransformOrigin="0.5,0.5" Stretch="Fill">
                <Path.RenderTransform>
                  <TransformGroup>
                    <TranslateTransform X="0" Y="0"/>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0" Y="0"/>
                    <TranslateTransform X="0" Y="0"/>
                  </TransformGroup>
                </Path.RenderTransform>
                <Path.Fill>
                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <LinearGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="0" Y="0"/>
                      </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="#DDFFFFFF" Offset="0"/>
                        <GradientStop Color="#CCFFFFFF" Offset="0.075"/>
                        <GradientStop Color="#A8FFFFFF" Offset="0.125"/>
                        <GradientStop Color="#66FFFFFF" Offset="1"/>
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Path.Fill>
                <Path.OpacityMask>
                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <LinearGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="0" Y="0"/>
                      </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0.33, 0, 0, 0" Offset="0"/>
                        <GradientStop Color="sc#0.33, 0, 0, 0" Offset="1"/>
                        <GradientStop Color="sc#1, 0, 0, 0" Offset="0.15"/>
                        <GradientStop Color="sc#1, 0, 0, 0" Offset="0.85"/>
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Path.OpacityMask>
                <Path.Data>
                  <PathGeometry>
                    <PathGeometry.Figures>
                      <PathFigureCollection>
                        <PathFigure StartPoint="0,5.2172972972973" IsClosed="True">
                          <BezierSegment IsSmoothJoin="True" Point1="0,2.33586356466659" Point2="4.00530427005143,5.68708245619956E-17" Point3="10.6327212680209,5.68708245619956E-17"/>
                          <LineSegment IsSmoothJoin="True" Point="50.5604228572445,0"/>
                          <PolyBezierSegment IsSmoothJoin="True" Points="57.187839,0 61.046486,2.3358636 61.046486,5.2172973 61.046486,8.098731 55.673903,6.0549479 49.046486,6.0549479"/>
                          <LineSegment IsSmoothJoin="True" Point="12,6.05494793258247"/>
                          <BezierSegment IsSmoothJoin="True" Point1="5.37258300203052,6.05494793258247" Point2="0,8.09873102992801" Point3="0,5.2172972972973"/>
                        </PathFigure>
                      </PathFigureCollection>
                    </PathGeometry.Figures>
                  </PathGeometry>
                </Path.Data>
              </Path>
            </Canvas>
          </Viewbox>
          <ControlTemplate.Triggers>
            <Trigger Property="IsFocused" Value="True"/>
            <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Shape.Fill" TargetName="XAquaCaustic_Template">
                <Setter.Value>
                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <LinearGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="0" Y="0"/>
                      </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0.9, 0.6, 0.879999936, 1" Offset="0.55844155844155841"/>
                        <GradientStop Color="sc#0.8, 0.278, 0.322400063, 0.722" Offset="0"/>
                        <GradientStop Color="sc#0.1, 0.278, 0.455599934, 0.722" Offset="1"/>
                        <GradientStop Color="sc#0.7, 0.100000024, 0.72999984, 1" Offset="0.74675324675324672"/>
                        <GradientStop Color="sc#0.33, 0.200000048, 0.5199999, 1" Offset="0.42207792207792205"/>
                        <GradientStop Color="sc#0.9, 0.16, 0.28, 0.640000045" Offset="0.31168831168831168"/>
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
              <Setter Property="Shape.Fill" TargetName="XAquaBase_Template">
                <Setter.Value>
                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <LinearGradientBrush.RelativeTransform>
                      <TransformGroup>
                        <TranslateTransform X="-0.5" Y="-0.5"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform X="0.5" Y="0.5"/>
                        <TranslateTransform X="0" Y="0"/>
                      </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="sc#0.9, 0.0168135613, 0.0737354159, 0.24450098" Offset="0.051948051948051951"/>
                        <GradientStop Color="sc#0.9, 0.2777778, 0.4555555, 0.7222222" Offset="0"/>
                        <GradientStop Color="sc#0.33, 0.0168135613, 0.0737354159, 0.24450098" Offset="0.75974025974025972"/>
                        <GradientStop Color="sc#0.9, 0.0168135613, 0.0737354159, 0.24450098" Offset="0.9285714285714286"/>
                        <GradientStop Color="sc#0.9, 0.0168073736, 0.0742135048, 0.2462013" Offset="0.5714285714285714"/>
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
              <Setter Property="RenderTransform" TargetName="XAquaBtnViewbox_Template">
                <Setter.Value>
                  <TransformGroup>
                    <TranslateTransform X="0" Y="0"/>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0" Y="0"/>
                    <TranslateTransform X="0" Y="2"/>
                  </TransformGroup>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False"/>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The BSD License


Written By
Dr. WPF
United States United States
Dr. WPF is a WPF Disciple! Check out the doctor's blog and bio for more information.

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 6 Apr 2008

Article Copyright 2008 by Dr. WPF
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1