The increment size is determined by the height of the Rectangle. In the example it had a height of 20px = 1 unit. So yes, this is coded in the view. But to me, that's where it belongs. The bigger the range that is to be represented, the smaller the height you would give the Rectangle. Are you saying that you want to treat whatever size the rectangle is as the maximum value it can display (100%), and then have it calculate the increments in between this? You could do that too using a ScaleTransform. I guess I'm a bit lost though as to the exact problem. Based on your original problem description, the one in my example seemed to fit what you were after. Did you give it a go?
Chris On 3 July 2010 20:41, Xerxes Battiwalla <[email protected]> wrote: > Sure, but the problem here is that the proportion of each increment is a > fixed size, as coded in the view. > > we need to have a variable increment size depending on which view the > control is used in. in some views it might have a range of -30 to 30 and in > other views the range could be different yet again, changing the size of > each increment. > > > On Sat, Jul 3, 2010 at 2:30 PM, Chris Anderson <[email protected]>wrote: > >> 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 >> >> > > _______________________________________________ > ozwpf mailing list > [email protected] > http://prdlxvm0001.codify.net/mailman/listinfo/ozwpf > >
_______________________________________________ ozwpf mailing list [email protected] http://prdlxvm0001.codify.net/mailman/listinfo/ozwpf
