Quantcast
Channel: Programming Forums
Viewing all articles
Browse latest Browse all 51036

Circular scale (gauge) and pointer resizing

$
0
0
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:


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?

Viewing all articles
Browse latest Browse all 51036

Trending Articles