Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Conceptual Children: A powerful new concept in WPF

, 6 Apr 2008
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

Share

About the Author

Dr. WPF

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 6 Apr 2008
Article Copyright 2008 by Dr. WPF
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid