5 Replies - 5692 Views - Last Post: 06 January 2013 - 05:18 AM Rate Topic: -----

#1 lucky3  Icon User is offline

  • Friend lucky3 As IHelpable
  • member icon

Reputation: 231
  • View blog
  • Posts: 765
  • Joined: 19-October 11

Circular scale (gauge) and pointer resizing

Posted 27 December 2012 - 07:58 AM

I recently started with WPF, and I'm having problems with my gauge test project. I've put 3 images inside grid cell (the same row, column), and set their horizontal and vertical alignment to center. Fist I have gauge, then over it pointer, and last is center bullet. Pointer rotation is bound to slider. Everything works fine, except pointer and center bullet size when I resize the window. I wanted them to remain the aspect ratio, and thought I could solve it with Margin, but I must be missing something, because pointer sometimes grows outside gauge, and central bullet grows or disappears,...

Here are example screenshots:
Attached Image

And video:


The problem, as I see it, is with different size of bottom gauge image when it is aligning itself horizontally or vertically, when window resizes in one direction only.

 <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="165*" />
            <RowDefinition Height="13*" />
            <RowDefinition Height="133*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="165*" />
            <ColumnDefinition Width="51*" />
            <ColumnDefinition Width="287*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Row="0" Grid.Column="0">
            <Image  Name="imgGauge" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch"   Source="/WpfApplication1;component/Images/gauge.png" />
           
            <Image Name="imgPointer" HorizontalAlignment="center"  VerticalAlignment="center"   Margin="25"  RenderTransformOrigin="0.5, 0.5" Stretch="Uniform" StretchDirection="Both" Source="/WpfApplication1;component/Images/pointer.png">
                <Image.Effect>
                    <DropShadowEffect ShadowDepth="5" BlurRadius="5" Color="Black" Direction="-20" Opacity="0.9" RenderingBias="Performance" />
                </Image.Effect>
                <Image.RenderTransform>
                    <RotateTransform Angle="{Binding ElementName=sldGas, Path=Value, Converter={StaticResource gaugeFormatter}}" />
                </Image.RenderTransform>
            </Image>
            
            <Image Margin="70"  MaxHeight="60" HorizontalAlignment="center" VerticalAlignment="center" Name="imgBullet" Source="/WpfApplication1;component/Images/bullet.png" />
        </Grid>
        <Slider Grid.Column="2" Grid.Row="0" Height="23" HorizontalAlignment="Stretch" Margin="60" Name="sldGas" VerticalAlignment="Stretch" Maximum="300" Value="150" />
    </Grid>



The obvious question is: how should I try to solve this pointer and bullet (or gauge) resizing anomaly?

Is This A Good Question/Topic? 0
  • +

Replies To: Circular scale (gauge) and pointer resizing

#2 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5529
  • View blog
  • Posts: 11,843
  • Joined: 02-June 10

Re: Circular scale (gauge) and pointer resizing

Posted 27 December 2012 - 02:01 PM

Layering a bunch of graphics for this isn't the way I'd suggest as it has no reusablity to it. If you want numbers that are in RPM for one project and MPH for another... 10 divisions in one program and 15 in another.

You'd be better off actually drawing the gauge and needle and tick marks etc.

http://www.codeproje...0341/Aqua-Gauge

http://www.codeproje...erforming-gauge

http://www.codeproje...-rotating-gauge

This post has been edited by tlhIn`toq: 27 December 2012 - 02:03 PM

Was This Post Helpful? 1
  • +
  • -

#3 lucky3  Icon User is offline

  • Friend lucky3 As IHelpable
  • member icon

Reputation: 231
  • View blog
  • Posts: 765
  • Joined: 19-October 11

Re: Circular scale (gauge) and pointer resizing

Posted 27 December 2012 - 02:21 PM

Yeah... I was aware of this, but as I mentioned, I'm a WPF beginner and the idea with stacked images seemed fine at the moment. If I could only match image top with pointer top, and give pointer margin from the image border, that would do then.... ;) Thanks for useful links :^:
Was This Post Helpful? 0
  • +
  • -

#4 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5529
  • View blog
  • Posts: 11,843
  • Joined: 02-June 10

Re: Circular scale (gauge) and pointer resizing

Posted 27 December 2012 - 02:36 PM

Something is off with the display because the gauge is round and thus height and width should be the same... But your app seems to think the width is more than twice the height.

Attached Image


You might want to recolor the grid, the cells and the image to make each space stand out.
A blue-backed gauge on a red cell on a yellow window for example.

So many of the WPF controls resize to fit the content that I'm going to bet there is some sizing taking place that you haven't accounted for.

Without zipping the entire project including images its hard for me to test and play with.
Was This Post Helpful? 0
  • +
  • -

#5 lucky3  Icon User is offline

  • Friend lucky3 As IHelpable
  • member icon

Reputation: 231
  • View blog
  • Posts: 765
  • Joined: 19-October 11

Re: Circular scale (gauge) and pointer resizing

Posted 27 December 2012 - 02:49 PM

That's the window height and width. If you're interested in playing with this be warned: it's my 3rd test project (the quickie), I started while going through the book, and this was just a quick testing idea in the mean time ;)
Attached File  GaugeWPF.zip (1.71MB)
Number of downloads: 56
Was This Post Helpful? 0
  • +
  • -

#6 lucky3  Icon User is offline

  • Friend lucky3 As IHelpable
  • member icon

Reputation: 231
  • View blog
  • Posts: 765
  • Joined: 19-October 11

Re: Circular scale (gauge) and pointer resizing

Posted 06 January 2013 - 05:18 AM

Today I remembered this "project", and a simple solution popped to my mind: I needed all 3 stacked images to be of the same size! Duh!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1