c# - How to create a square button? -

thanks @justin xl , @grek40 me much.
must apologize poor english troubles much.
, think need improve question others in furture.

here newest:
need make square button this:

programme fullscreen programme different device has different window's size.
square button should can resizeable beaucase want make reactive ui.
, how can make square button?
thank you.

use rectangle.stretch property:

<rectangle fill="red" stretch="uniform"></rectangle> 

i think answers actual question of creating rectangle width , height same , rectangle stretched available space.

in terms of binding, multibinding on both width , height imultivalueconverter implementation returns minimum of input values might work. however, it's needed controls don't provide automated stretching.

---

you can use attached properties set same width/height given limit:

public static class squaresize {     public static double getwidthlimit(dependencyobject obj)     {         return (double)obj.getvalue(widthlimitproperty);     }      public static void setwidthlimit(dependencyobject obj, double value)     {         obj.setvalue(widthlimitproperty, value);     }      public static readonly dependencyproperty widthlimitproperty = dependencyproperty.registerattached(         "widthlimit", typeof(double), typeof(squaresize),         new frameworkpropertymetadata(double.positiveinfinity, new propertychangedcallback(onwidthlimitchanged)));      private static void onwidthlimitchanged(dependencyobject d, dependencypropertychangedeventargs e)     {         updatesize(d, (double)e.newvalue, getheightlimit(d));     }        public static double getheightlimit(dependencyobject obj)     {         return (double)obj.getvalue(heightlimitproperty);     }      public static void setheightlimit(dependencyobject obj, double value)     {         obj.setvalue(heightlimitproperty, value);     }      public static readonly dependencyproperty heightlimitproperty = dependencyproperty.registerattached(         "heightlimit", typeof(double), typeof(squaresize),         new frameworkpropertymetadata(double.positiveinfinity, new propertychangedcallback(onheightlimitchanged)));      private static void onheightlimitchanged(dependencyobject d, dependencypropertychangedeventargs e)     {         updatesize(d, getwidthlimit(d), (double)e.newvalue);     }        private static void updatesize(dependencyobject d, double widthlimit, double heightlimit)     {         double resultsize = math.min(widthlimit, heightlimit);         d.setcurrentvalue(frameworkelement.widthproperty, resultsize);         d.setcurrentvalue(frameworkelement.heightproperty, resultsize);     } } 

use appropriate xmlns namespace

<border x:name="border" grid.column="1" grid.row="1">     <rectangle         fill="red"         local:squaresize.widthlimit="{binding elementname=border,path=actualwidth}"         local:squaresize.heightlimit="{binding elementname=border,path=actualheight}"/> </border> 

---

a solution involving custom control wrapper square-spaced content:

public class squarecontentcontrol : contentcontrol {     protected override size arrangeoverride(size arrangebounds)     {         var sizelimit = math.min(arrangebounds.width, arrangebounds.height);         if (visualchildrencount > 0)         {             var child = getvisualchild(0) uielement;             if (child != null)             {                 child.arrange(new rect(new point((arrangebounds.width - sizelimit) / 2, (arrangebounds.height - sizelimit) / 2), new size(sizelimit, sizelimit)));                 return arrangebounds;             }         }         return base.arrangeoverride(arrangebounds);     }      protected override size measureoverride(size constraint)     {         var sizelimit = math.min(constraint.width, constraint.height);         if (visualchildrencount > 0)         {             var child = getvisualchild(0) uielement;             if (child != null)             {                 child.measure(new size(sizelimit, sizelimit));                 return child.desiredsize;             }         }         return base.measureoverride(constraint);     } } 

usage:

<border x:name="border" grid.column="1" grid.row="1">     <local:squarecontentcontrol>         <rectangle fill="red"/>     </local:squarecontentcontrol> </border>