This project is read-only.
2
Vote

Resize

description

Resizing this control does not work very well.
If you use the xaml below the resizing will be much butter, although you will loose some style effects but the difference is barely vissible. ( Color is also different than in original )
<UserControl x:Class="WpfGauge.Gauge"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:converters="clr-namespace:WpfGauge.Converters"
             xmlns:local="clr-namespace:WpfGauge"
             x:Name="GaugeControl"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="500">
    <UserControl.Resources>
        


        <ResourceDictionary>
            <SolidColorBrush x:Key="SmartDarkBlue"  Color="#FF005DA8"></SolidColorBrush>
            <SolidColorBrush x:Key="SmartLightBlue" Color="#FFD8E0F0"></SolidColorBrush>
            
            <converters:SubtractionFormatter x:Key="SubtractionFormatter" />
            <converters:ValueTextMarginConverter x:Key="ValueTextMarginConverter" />

            <Style x:Key="DefaultTextStyle" TargetType="TextBlock">
                <Setter Property="Foreground" Value="GhostWhite" />
                <Setter Property="FontSize" Value="22" />
                <Setter Property="FontFamily" Value="Agency FB" />
                <Setter Property="FontWeight" Value="Bold" />
            </Style>
        </ResourceDictionary>

    </UserControl.Resources>
    <Grid Grid.Column="1" Grid.Row="1" 
          Width="{Binding ElementName=GaugeControl, Path=Width}" 
          Height="{Binding ElementName=GaugeControl, Path=Height}" x:Name="LayoutRoot">
        <!--Outer Edge-->
        <Ellipse StrokeThickness="10" x:Name="OuterEllipse" Stroke="DimGray" Margin="0" Stretch="UniformToFill">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Gainsboro" Offset="0.462"/>
                    <GradientStop Color="Silver" Offset="0.552"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <!--Inner Edge-->
        <Ellipse x:Name="InnerEllipse" Stroke="GhostWhite" Fill="Black" Margin="10" Stretch="UniformToFill" />
        <Image Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=LightVisibility}"
            Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=Width, Converter={StaticResource SubtractionFormatter}, ConverterParameter=25}" 
            Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=Height, Converter={StaticResource SubtractionFormatter}, ConverterParameter=25}"
            Source="/WpfGauge;component/Images/gauge_background.png">
            <Image.Effect>
                <BlurEffect />
            </Image.Effect>
        </Image>

        <!--The grid where all dynamic elements are added-->
        <Grid x:Name="DynamicLayout" />

        <!--The grid where all GoalMarkers are drawn-->
        <Grid x:Name="GoalMarkerLayout" />

        <Canvas Width="0" Height="0">
            <Polygon x:Name="Needle"
                    ToolTipService.IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=IsNeedleTooltipEnabled}" 
                    StrokeThickness="0" Fill="{StaticResource SmartDarkBlue}">
                <Polygon.ToolTip>
                    <ContentControl Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=NeedleTooltip}" />
                </Polygon.ToolTip>

                <Polygon.RenderTransform>
                    <RotateTransform x:Name="NeedleRotateTransform" />
                </Polygon.RenderTransform>
                <Polygon.Effect>
                    <DropShadowEffect x:Name="NeedleDropShadowEffect" ShadowDepth="3" />
                </Polygon.Effect>
            </Polygon>
            <!--Needle Attachment - Outer-->
            <Ellipse Canvas.Top="-10" Canvas.Left="-10" Width="20" Height="20" Stroke="Silver">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFCFCFCF" Offset="0.462"/>
                        <GradientStop Color="#FFB2B2B2" Offset="0.552"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Effect>
                    <DropShadowEffect ShadowDepth="3" />
                </Ellipse.Effect>
            </Ellipse>
            <Ellipse Canvas.Top="-8" Canvas.Left="-8" Width="16" Height="16" Stroke="#FFAAAAAA">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="#FF959595" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>

        <TextBlock
                        HorizontalAlignment="Center" VerticalAlignment="Center" 
                        Style="{StaticResource DefaultTextStyle}" x:Name="ValueText" />
    </Grid>
</UserControl>

comments