PathStyle corrupts button image

3 posts, 1 answers
  1. Joe
    Joe avatar
    39 posts
    Member since:
    Nov 2017

    Posted 14 Feb 2018 Link to this post

    I have some  RadPathButtons (inside a WrapPanel) with attached commands.  When the commands are enabled, I want the paths to show up in black.    Instead they show up in grey, even though the attached commands are enabled and do execute when I click them.  See the first attached image ("before_style.png") to see what I mean

    <WrapPanel x:Name="ViewPanel"
               Background="{StaticResource GsBackgroundDark}"
               VerticalAlignment="Top"
               HorizontalAlignment="Stretch"
               Margin="0"
                >
     
        <tk:RadPathButton Margin="10 10 0 0"
                          Height="40"
                          Width="40"
                          IsEnabled="True"
                          Foreground="Black"
                          PathGeometry="{StaticResource HeightMapPathGeometry}"
                          Command="{Binding ShowHeightMapCmd}"
            />
     
        <tk:RadPathButton Margin="10 10 0 0"
                          Height="40"
                          Width="40"
                          IsEnabled="True"
                          ToolTip="Show Scan Images"
                          PathGeometry="{StaticResource ImagesGeometry}"
                          Command="{Binding ShowImagesCmd}"                                 
        />
    </WrapPanel>

     

     

    So, following Telerik's advice, I added a style resource to use in each of the button's PathStyle Property

     

    <WrapPanel.Resources>
        <Style x:Key="MyPathStyle" TargetType="{x:Type Path}">
            <Setter Property="Fill" Value="Black"/>
            <Setter Property="Stroke" Value="Black"/>
        </Style>
    </WrapPanel.Resources>

     

    Then I set this resource as the PathStyle for each of the buttons.   For example (see line #7 below)

    01.<tk:RadPathButton Margin="10 10 0 0"
    02.                  Height="40"
    03.                  Width="40"
    04.                  IsEnabled="True"
    05.                  ToolTip="Show Scan Images"
    06.                  PathGeometry="{StaticResource ImagesGeometry}"
    07.                  PathStyle="{StaticResource MyPathStyle}"
    08.                  Command="{Binding ShowImagesCmd}"                                 
    09./>

     

    But then when I run my application again, the button icons don't look even recognizable.  It's like they've expanded far beyond the boundaries of the button, when all I did was try to change the color.  Look at the the second attached image ("after_style.png") to see what I mean

    Can you tell me what I am missing?  I never expected merely applying a color to the paths would change their geometry.

  2. Joe
    Joe avatar
    39 posts
    Member since:
    Nov 2017

    Posted 15 Feb 2018 in reply to Joe Link to this post

    I was able to get around this by also adding another setter to my style for the Stretch property

    <Setter Property="Stretch" Value="Uniform"/>

     

    Don't know why this was needed -- I tried unsuccessfully to base my style on the "default" for path -- but it fixes the problem and is a minor fix so I am OK now

     

     

  3. Answer
    Martin
    Admin
    Martin avatar
    126 posts

    Posted 19 Feb 2018 Link to this post

    Hi,

    In our default path style in the setter of the button we have a Stretch="Fill". When you set a new style, all of our setters are removed. The key for our "default" style for the Path in the RadPathButton is "RadPathButtonPathStyle".

    By default the Path will automatically size the geometry based on the geometry's points (the Stretch property is by default None). If they are larger than the size of the Path control, they will be clipped, as was most probably the case with the paths you are using.

    Setting Stretch to Uniform will force the geometry to become as large as possible without overflowing and keep its aspect ratio. Fill will force it to stretch to fill the Path container and UniformToFill will keep the aspect ratio and stretch it to fill the maximum space and some clipping might occur.

    We do not set that property to the Path instance in the ControlTemplate of the RadPathButton, so that it can be changed via the style.

    I am glad that you have managed to get around that behavior. If you have any other questions, please do not hesitate to contact us further.

    Regards,
    Martin
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top