Not at all. Throw the following XAML on a view:
<Rectangle Height="20" Width="50" Margin="118,130,0,0"
HorizontalAlignment="Left" VerticalAlignment="Top" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF2B7911" Offset="0" />
<GradientStop Color="#FF56FF00" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<ScaleTransform ScaleY="1" CenterY="20" />
</Rectangle.RenderTransform>
</Rectangle>
You'll get a little bar indicating a value of 1. Now change the ScaleY
property of the transform to 6. Then try changing it to -6. Represents
exactly what you are after. Then you can bind the ScaleY property directly
to your ViewModel property that exposes the value to display.
Note: There is an artefact at the top and bottom of the rectangle that
appears when it is scaled. Maybe someone has an answer to prevent that?
I'm sure there's a way, just not off the top of my head. This solution
solves your primary problem however.
Hope this helps.
Chris
On 3 July 2010 13:09, Xerxes Battiwalla <[email protected]> wrote:
> Correct me if I'm wrong here, but that would then mean the vm has to know
> the height of the control in order to set the correct proportion? Using star
> values at least means the vm only has to know about ratios and proportions,
> not absolute heights
>
> sent from my phone
>
> On 2 Jul 2010 08:49, "Chris Anderson" <[email protected]> wrote:
> > I'd personally use a scale transform rather than star values. It would
> > allow you to bind the ScaleY property to a view model property with the
> > value to display however, so no need for code-behind.
> >
> > Chris
> >
> >
> > On 2 July 2010 08:38, Xerxes Battiwalla <[email protected]> wrote:
> >
> >> Hi everyone,
> >>
> >> This week we've needed to create a gauge control which is used to
> indicate
> >> positive values by filling a bar from the middle of the gauge upward,
> and
> >> negative values from the middle downward. A picture is worth a thousand
> >> words, so here's a QnD of what the control should do:
> >> http://www.xerxesb.com/wp-content/uploads/2010/07/gauges.png
> >>
> >> The first gauge shows the control in its initial state. When the user
> >> presses the up arrow, the control increases in single increments (as in
> the
> >> second gauge) and when they press down it goes in reverse (third gauge)
> >>
> >> We managed to do it, but I wanted to canvas how everyone else would
> >> implement the same control?
> >>
> >> Our implementation basically used a fill for the green bit, and placed
> it
> >> inside a grid with two rows (the grid was only half the size of the
> whole
> >> bar, and by default positioned to the entire height of the positive side
> of
> >> the gauge). The fill's size was set to take up the entire bottom row,
> and we
> >> then had some code in the code-behind to set the size of both rows using
> >> star values. If the value was negative we then apply a RenderTransform
> to
> >> flip the fill upside down. It works, but feels kludgy. Was hoping there
> is a
> >> XAML only way of doing something like this?
> >>
> >> Cheers,
> >> Xerx
> >>
> >> _______________________________________________
> >> ozwpf mailing list
> >> [email protected]
> >> http://prdlxvm0001.codify.net/mailman/listinfo/ozwpf
> >>
> >>
>
> _______________________________________________
> ozwpf mailing list
> [email protected]
> http://prdlxvm0001.codify.net/mailman/listinfo/ozwpf
>
>
_______________________________________________
ozwpf mailing list
[email protected]
http://prdlxvm0001.codify.net/mailman/listinfo/ozwpf
