WPF Shape Rectangle Binding

Question

I'm trying to make some kind of shape in wpf, which does resize itself to the content (which should be text). Unfortunately, the stretch property isn't the right thing, since I want only the width of the Shape resized and without the borders (pls copy bottom example in xamlpad to see for yourself) of this shape stretched. The borders should stay the way they are, or at least scale in Uniform. I've tried many ideas. With different slices of the shape in a grid, stackpanel, or with a clipped panel and etc. My next approach would be the following one:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Page.Resources>
<LinearGradientBrush StartPoint="0.0,1" EndPoint="0.0,0" x:Key="brushYellow">
  <LinearGradientBrush.GradientStops>
    <GradientStop Offset="0.000000" Color="#fffef4a6"/>
    <GradientStop Offset="0.175824" Color="#fffef9d6"/>
    <GradientStop Offset="0.800000" Color="#fffef9d6"/>
    <GradientStop Offset="1.000000" Color="#fffef4a6"/>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush></Page.Resources><Grid>
 <Path Stroke="#fffce90d" StrokeThickness="1" Fill="{StaticResource brushYellow}">
    <Path.Data>
      <CombinedGeometry GeometryCombineMode="Exclude">
        <CombinedGeometry.Geometry1>
          <RectangleGeometry RadiusX="15" RadiusY="15">
            <!--RectangleGeometry.Rect>
              <Binding StringFormat="{}{0 0 {0} 82}" ElementName="Text" Path="Width"/>
            </RectangleGeometry.Rect-->
            <RectangleGeometry.Rect>
              <Rect Width="150" Height="82"/>
            </RectangleGeometry.Rect>
          </RectangleGeometry>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure IsClosed="True" StartPoint="0,15">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <LineSegment Point="17,41" />
                      <LineSegment Point="0,67" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </CombinedGeometry.Geometry2>
      </CombinedGeometry>
    </Path.Data>
  </Path>
  <TextBox Name="Text" Background="Transparent" BorderThickness="0" MinWidth="150" Margin="0"/>
</Grid></Page>

This will work right out of the box in xamlpad. The uncommented part at line 19 is what I really want to achieve: Binding the Rect of the Rectangle to something else. Unfortunately, the Width of Rect isn't dp, that's why I'm using directly a stringformatted Binding to Rect itself.

As expected with life, that doesn't work (nothing is visible) :D What am I doing wrong here?

Answer 1

You could try using a transform to change the size of the rectangle rather than binding the rectangle's width directly. I think this should work.

E.g. put something like this in your RectangleGeometry tag:

<RectangleGeometry.Transform>
    <ScaleTransform ScaleX="{Binding ElementName=textBoxName, Path=Width, 
        Converter=MyScaleWidthConverter}" />
</RectangleGeometry.Transform>

Where textBoxName is the name of your textbox. Couldn't bring myself to call it Text - too confusing.

You will need to supply a converter to ensure the scaling is correct - e.g. You'll probably want to return something like Width / 150 given your sample code.

I am seeing slightly odd behaviour when the rectangle's width is set to Auto in the Visual Studio designer - I think this is probably a designer quirk. Should work once the converter is hooked up at run time.