Creating a xaml button with rectangle

Question

I'm trying to create a "button" with a rectangle since we're gonna have different images on MouseOver, Clicked and the "normal" state. We started to use the button control but after setting the image on it in Vista using Chrome as the theme then when hovering the button the image got blurred out.

The images are created by the graphics team and so far we got one for 'Clicked' and 'normal' states. These are placed in a central place where other resources are.

When trying to set the trigger for all these events on the rectangle i can't get it to catch the style from the resource or I just don't handle the controltemplates correct.

This is still under a test fase but I only got a few days until the real thing is gonna happen :P

<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;

    <Style x:Key="addFileButtonClicked_Wide" TargetType="{x:Type Rectangle}">
     <Setter Property="Fill">
      <Setter.Value>
       <DrawingBrush Stretch="Uniform">
        <DrawingBrush.Drawing>
         <DrawingGroup>
          <DrawingGroup.Children>
           <GeometryDrawing Geometry="F1 M 471.779,570.092C 470.736,570.092 469.889,570.936 469.889,571.98L 469.889,590.877C 469.889,591.923 470.736,592.769 471.779,592.769L 518.677,592.769C 519.721,592.769 520.565,591.923 520.565,590.877L 520.565,571.98C 520.565,570.936 519.721,570.092 518.677,570.092L 471.779,570.092 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.50001,0.999973" EndPoint="0.50001,-1.34573e-005">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FFBCBDBF" Offset="0"/>
               <GradientStop Color="#FFFFFFFF" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <GeometryDrawing Geometry="F1 M 474.047,572.359C 473.003,572.359 472.157,573.204 472.157,574.248L 472.157,588.611C 472.157,589.653 473.003,590.5 474.047,590.5L 516.409,590.5C 517.453,590.5 518.299,589.653 518.299,588.611L 518.299,574.248C 518.299,573.204 517.453,572.359 516.409,572.359L 474.047,572.359 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500025,-6.72886e-006" EndPoint="0.500025,1.00003">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FFD1D3D4" Offset="0"/>
               <GradientStop Color="#FFFFFFFF" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <GeometryDrawing Geometry="F1 M 475.987,588.731L 492.889,588.731L 492.889,574.129L 475.987,574.129L 475.987,588.731 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500045,0.999933" EndPoint="0.500045,-8.36023e-005">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FFC8E4EB" Offset="0"/>
               <GradientStop Color="#FF75BDCD" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <DrawingGroup ClipGeometry="F1 M 0,4.00543e-005L 793.701,4.00543e-005L 793.701,1122.52L 0,1122.52L 0,4.00543e-005 Z ">
            <DrawingGroup.Children>
             <GeometryDrawing Geometry="F1 M 475.987,574.128L 492.891,574.128L 492.891,588.729L 475.987,588.729L 475.987,574.128 Z ">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 478.654,577.43L 488.984,577.43">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 478.654,581.43L 487.651,581.43">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 478.654,585.43L 487.651,585.43">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
            </DrawingGroup.Children>
           </DrawingGroup>
           <GeometryDrawing Geometry="F1 M 484.663,588.731L 501.565,588.731L 501.565,574.129L 484.663,574.129L 484.663,588.731 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500031,0.999933" EndPoint="0.500031,-8.36023e-005">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FFC8E4EB" Offset="0"/>
               <GradientStop Color="#FF75BDCD" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <DrawingGroup ClipGeometry="F1 M 0,4.00543e-005L 793.701,4.00543e-005L 793.701,1122.52L 0,1122.52L 0,4.00543e-005 Z ">
            <DrawingGroup.Children>
             <GeometryDrawing Geometry="F1 M 484.663,574.128L 501.567,574.128L 501.567,588.729L 484.663,588.729L 484.663,574.128 Z ">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 487.329,577.43L 497.661,577.43">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 487.329,581.43L 492.328,581.43">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 487.329,585.43L 496.328,585.43">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
            </DrawingGroup.Children>
           </DrawingGroup>
           <GeometryDrawing Geometry="F1 M 504.992,574.128L 504.992,579.233L 499.888,579.233L 499.888,583.625L 504.992,583.625L 504.992,588.731L 509.385,588.731L 509.385,583.625L 514.489,583.625L 514.489,579.233L 509.385,579.233L 509.385,574.128L 504.992,574.128 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500007,0.999933" EndPoint="0.500007,-7.94148e-005">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FF91F456" Offset="0"/>
               <GradientStop Color="#FF50C400" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <DrawingGroup ClipGeometry="F1 M 0,4.00543e-005L 793.701,4.00543e-005L 793.701,1122.52L 0,1122.52L 0,4.00543e-005 Z ">
            <DrawingGroup.Children>
             <GeometryDrawing Geometry="F1 M 504.992,574.128L 509.385,574.128L 509.385,579.234L 514.489,579.234L 514.489,583.626L 509.385,583.626L 509.385,588.731L 504.992,588.731L 504.992,583.626L 499.888,583.626L 499.888,579.234L 504.992,579.234L 504.992,574.128 Z ">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF076F00"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
            </DrawingGroup.Children>
           </DrawingGroup>
           <GeometryDrawing Geometry="F1 M 504.992,574.128L 504.992,579.233L 499.888,579.233L 499.888,583.625L 504.992,583.625L 504.992,588.731L 509.385,588.731L 509.385,583.625L 514.489,583.625L 514.489,579.233L 509.385,579.233L 509.385,574.128L 504.992,574.128 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500007,0.999933" EndPoint="0.500007,-7.94148e-005">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FF91F456" Offset="0"/>
               <GradientStop Color="#FF50C400" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <DrawingGroup ClipGeometry="F1 M 0,4.00543e-005L 793.701,4.00543e-005L 793.701,1122.52L 0,1122.52L 0,4.00543e-005 Z ">
            <DrawingGroup.Children>
             <GeometryDrawing Geometry="F1 M 504.992,574.128L 509.385,574.128L 509.385,579.234L 514.489,579.234L 514.489,583.626L 509.385,583.626L 509.385,588.731L 504.992,588.731L 504.992,583.626L 499.888,583.626L 499.888,579.234L 504.992,579.234L 504.992,574.128 Z ">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF076F00"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
            </DrawingGroup.Children>
           </DrawingGroup>
          </DrawingGroup.Children>
         </DrawingGroup>
        </DrawingBrush.Drawing>
       </DrawingBrush>
      </Setter.Value>
     </Setter>
    </Style>

    <Style x:Key="addFileButtonUnClicked_Wide" TargetType="{x:Type Rectangle}">
     <Setter Property="Fill">
      <Setter.Value>
       <DrawingBrush Stretch="Uniform">
        <DrawingBrush.Drawing>
         <DrawingGroup>
          <DrawingGroup.Children>
           <GeometryDrawing Geometry="F1 M 141.781,473.58C 140.737,473.58 139.891,474.427 139.891,475.471L 139.891,494.368C 139.891,495.411 140.737,496.257 141.781,496.257L 188.679,496.257C 189.723,496.257 190.567,495.411 190.567,494.368L 190.567,475.471C 190.567,474.427 189.723,473.58 188.679,473.58L 141.781,473.58 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500009,-2.69146e-006" EndPoint="0.500009,0.999987">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FFD1D3D4" Offset="0"/>
               <GradientStop Color="#FFFFFFFF" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <GeometryDrawing Geometry="F1 M 144.048,475.848C 143.005,475.848 142.159,476.695 142.159,477.737L 142.159,492.1C 142.159,493.144 143.005,493.991 144.048,493.991L 186.412,493.991C 187.455,493.991 188.3,493.144 188.3,492.1L 188.3,477.737C 188.3,476.695 187.455,475.848 186.412,475.848L 144.048,475.848 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.499996,0.99997" EndPoint="0.499996,6.72837e-006">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FFE6E8E8" Offset="0"/>
               <GradientStop Color="#FFFFFFFF" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <GeometryDrawing Geometry="F1 M 145.977,492.219L 162.881,492.219L 162.881,477.617L 145.977,477.617L 145.977,492.219 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500021,1.00004" EndPoint="0.500021,2.50807e-005">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FFC8E4EB" Offset="0"/>
               <GradientStop Color="#FF75BDCD" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <DrawingGroup ClipGeometry="F1 M 0,0L 793.701,0L 793.701,1122.52L 0,1122.52L 0,0 Z ">
            <DrawingGroup.Children>
             <GeometryDrawing Geometry="F1 M 145.977,477.617L 162.881,477.617L 162.881,492.219L 145.977,492.219L 145.977,477.617 Z ">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 148.645,480.918L 158.977,480.918">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 148.645,484.918L 157.643,484.918">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 148.645,488.918L 157.643,488.918">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
            </DrawingGroup.Children>
           </DrawingGroup>
           <GeometryDrawing Geometry="F1 M 154.655,492.219L 171.557,492.219L 171.557,477.617L 154.655,477.617L 154.655,492.219 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500046,1.00004" EndPoint="0.500046,2.50807e-005">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FFC8E4EB" Offset="0"/>
               <GradientStop Color="#FF75BDCD" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <DrawingGroup ClipGeometry="F1 M 0,0L 793.701,0L 793.701,1122.52L 0,1122.52L 0,0 Z ">
            <DrawingGroup.Children>
             <GeometryDrawing Geometry="F1 M 154.655,477.617L 171.559,477.617L 171.559,492.219L 154.655,492.219L 154.655,477.617 Z ">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 157.322,480.918L 167.654,480.918">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 157.322,484.918L 162.32,484.918">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
             <GeometryDrawing Geometry="F1 M 157.322,488.918L 166.32,488.918">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF3D93A4"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
            </DrawingGroup.Children>
           </DrawingGroup>
           <GeometryDrawing Geometry="F1 M 174.984,477.617L 174.984,482.721L 169.88,482.723L 169.88,487.115L 174.984,487.115L 174.984,492.219L 179.376,492.219L 179.376,487.115L 184.481,487.115L 184.481,482.723L 179.376,482.723L 179.376,477.617L 174.984,477.617 Z ">
            <GeometryDrawing.Brush>
             <LinearGradientBrush StartPoint="0.500019,1.00004" EndPoint="0.500019,2.50807e-005">
              <LinearGradientBrush.GradientStops>
               <GradientStop Color="#FF91F456" Offset="0"/>
               <GradientStop Color="#FF50C400" Offset="1"/>
              </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
            </GeometryDrawing.Brush>
           </GeometryDrawing>
           <DrawingGroup ClipGeometry="F1 M 0,0L 793.701,0L 793.701,1122.52L 0,1122.52L 0,0 Z ">
            <DrawingGroup.Children>
             <GeometryDrawing Geometry="F1 M 174.984,477.618L 179.376,477.618L 179.376,482.723L 184.482,482.723L 184.482,487.115L 179.376,487.115L 179.376,492.219L 174.984,492.219L 174.984,487.115L 169.88,487.115L 169.88,482.723L 174.984,482.723L 174.984,477.618 Z ">
              <GeometryDrawing.Pen>
               <Pen Thickness="1.33333" LineJoin="Round" Brush="#FF076F00"/>
              </GeometryDrawing.Pen>
             </GeometryDrawing>
            </DrawingGroup.Children>
           </DrawingGroup>
          </DrawingGroup.Children>
         </DrawingGroup>
        </DrawingBrush.Drawing>
       </DrawingBrush>
      </Setter.Value>
     </Setter>
     <Setter Property="Width" Value="40"/>
     <Setter Property="Height" Value="20"/>
    </Style>

</ResourceDictionary>

Answer 1

Hi,

You have to create a style for the button and inside that style you have to put those to recatngles and on on the second one put visibility=collapsed and add a trigger OnMouseOver to show the second rectanlge and to hide the first one, as the blured image ... put SnapsToDevicePixels=True on rectangles.