search

ElinamLLC / SharpVectors

SharpVectors - SVG# Reloaded: SVG DOM and Rendering in C# for the .Net.
https://elinamllc.github.io/SharpVectors/
BSD 3-Clause "New" or "Revised" License
713 stars 136 forks source link

Render problem with "Grid.ColumnDefinitions" on runtime #234

Closed cemalgulbeyaz closed 1 year ago

cemalgulbeyaz commented 1 year ago

I have using SharpVector library in my project (WPF Core) to showing SVG images and this is the my reference " < PackageReference Include="SharpVectors.Reloaded" Version="1.8.1" / > " The problem is happening if i use the svg image in grid with column definations. SVG image is render and showing while desing time with column defination but if i go to debug and runtime, it doesn't render and show. Everyting works normal without column defination. I put the xaml codes and screenshots below

With Grid.ColumnDefinitions

<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="350*" />
            <RowDefinition Height="100*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="700*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
        <Button Style="{DynamicResource ResourceKey=TransparentButton}" 
                Grid.Column="0"
                Grid.Row="0"
                Grid.RowSpan="3"
                Background="Transparent" >
            <Image Source="{svgc:SvgImage /CustomControls/images/left-arrow.svg}" Margin="15" RenderTransformOrigin="0.5,0.5"/>
        </Button>
    </Grid>
</Grid>

Without Grid.ColumnDefinitions

<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="350*" />
            <RowDefinition Height="100*" />
        </Grid.RowDefinitions>
        <Button Style="{DynamicResource ResourceKey=TransparentButton}" 
                Grid.Column="0"
                Grid.Row="0"
                Grid.RowSpan="3"
                Background="Transparent" >
            <Image Source="{svgc:SvgImage /CustomControls/images/left-arrow.svg}" Margin="15" RenderTransformOrigin="0.5,0.5"/>
        </Button>
    </Grid>
</Grid>

Screenshot

paulushub commented 1 year ago

@cemalgulbeyaz Normal WPF behavior of layout. You can either control the dimension with the Grid dimension definition or set the dimension of the Image. By design, SharpVectors does not control the size of the generated drawing, allowing you to have full control.

cemalgulbeyaz commented 1 year ago

@paulushub Thanks to you for information. Yes you are right if i set the Width and Height for Grid wich one cover the Image is works fine. But there is another situation now. I using this Grid in a UserControl and this user control size can change depending on manin view. I have tried to set Auto width and height ( already default value :) ) for Grid but it didn't work. I have to figure out this one now :)

paulushub commented 1 year ago

Image has stretch property that determines how it flows with the layout.

I using this Grid in a UserControl and this user control size can change depending on main view.

The question then is how do you want the Image control to behave? Depending on your requirements you can control the sizes of the various controls or dynamically change the size definition of the grid in the C# code-behind. With this flexibility of the WPF layout and vector nature of the drawing output from SharpVectors, we decided to simply hand-off and let the user take the control.

The only time we try to restrict the size of the SharpVectors drawings is when rendering static image (bitmap), so the SvgImage has PixelWidth/PixelHeight properties to handle that. Even SvgImage has a base class SvgImageBase, which handles the conversions, and you can extend this to create your customized behavior or use other controls (see the documentations).

GioviQ commented 1 year ago

I downgraded to version 1.8.0 to get the previous behaviour.

paulushub commented 1 year ago

I downgraded to version 1.8.0 to get the previous behaviour.

What behavior changed for you?

cemalgulbeyaz commented 1 year ago

@paulushub Ok i figured it by sertting MinWidth for CloumnDefination. Thanks for helping

GioviQ commented 1 year ago

I downgraded to version 1.8.0 to get the previous behaviour.

What behavior changed for you?

With 1.8.1 I do not see anymore SvgViewbox

paulushub commented 1 year ago

With 1.8.1 I do not see anymore SvgViewbox

Sorry, I could not verify your issue. I have just tested the three Nuget packages

All show the SvgViewbox without any problem:

svgviewbox

GioviQ commented 1 year ago

SharpVectors.Wpf with .NET 4.7.2

with 1.8.0 visible, with 1.8.1 not

<UserControl x:Class="Desktop.Views.DesktopViewNotification"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:gif="clr-namespace:XamlAnimatedGif;assembly=XamlAnimatedGif"
             xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
             xmlns:infConverters="clr-namespace:Main.Infrastructure.Client.Converters;assembly=Main.Infrastructure.Client"
             xmlns:custom="clr-namespace:OutlineText;assembly=OutlineTextControl"
             prism:ViewModelLocator.AutoWireViewModel="True">
    <UserControl.Resources>
        <ResourceDictionary>
            <infConverters:FactorConverter x:Key="FactorConverter" />
            <infConverters:ToVisibilityConverter x:Key="ToVisibilityConverter" />
            <infConverters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
            <BooleanToVisibilityConverter x:Key="BoolToVis" />
            <infConverters:StringToUpperConverter x:Key="StringToUpperConverter" />
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Main.Themes;component/MaterialDesign.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <prism:Dialog.WindowStyle>
        <Style TargetType="Window" BasedOn="{StaticResource DefaultDialog}" />
    </prism:Dialog.WindowStyle>
    <Grid MinWidth="640" Width="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={StaticResource FactorConverter}, ConverterParameter=0.75 }">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border CornerRadius="20,20,0,0" BorderThickness="10,10,10,0" BorderBrush="{DynamicResource PrimaryHueDarkBrush}" Background="{DynamicResource MaterialDesignPaper}" Margin="0,0,0,-3">
            <Viewbox StretchDirection="Both">
                <StackPanel>
                    <custom:OutlineTextControl HorizontalAlignment="Center" VerticalAlignment="Center" Margin="15,10,15,25"
                                               FontFamily="Arial Black" FontSize="50" StrokeThickness="1" Bold="True"
                                               Stroke="Black" Fill="{DynamicResource SecondaryHueMidBrush}"
                                               Effect="{StaticResource OutlineDropShadowEffect}"
                                               Text="{Binding Notification.WelcomeMessage, Converter={StaticResource StringToUpperConverter}}"
                                               Visibility="{Binding Notification.WelcomeMessage, Converter={StaticResource ToVisibilityConverter}}"/>
                    <custom:OutlineTextControl HorizontalAlignment="Center" VerticalAlignment="Center" Margin="15,0,15,25"
                                               FontFamily="Arial Black" FontSize="48" StrokeThickness="1" Bold="True"
                                               Stroke="Black" Fill="{DynamicResource PrimaryHueDarkBrush}"
                                               Effect="{StaticResource OutlineDropShadowEffect}"
                                               Text="{Binding Notification.Title, Converter={StaticResource StringToUpperConverter}}"/>
                    <custom:OutlineTextControl HorizontalAlignment="Center" VerticalAlignment="Center" Margin="15,0,15,3"
                                               FontFamily="Arial Black" FontSize="32" StrokeThickness="1" Bold="True"
                                               Stroke="Black" Fill="{DynamicResource PrimaryHueLightBrush}"
                                               Effect="{StaticResource OutlineDropShadowEffect}"
                                               Text="{Binding Notification.Message, Converter={StaticResource StringToUpperConverter}}"/>
                </StackPanel>
            </Viewbox>
        </Border>
        <Border Grid.Row="1" CornerRadius="0,0,20,20" BorderThickness="10,0,10,10" BorderBrush="{DynamicResource PrimaryHueDarkBrush}" Background="{DynamicResource MaterialDesignPaper}" Height="400" MinWidth="600">
            <Grid Margin="20 15 20 50">
                <Image gif:AnimationBehavior.SourceUri="{Binding Notification.ImageUrl}" Stretch="None"
                       Visibility="{Binding Notification.ImageUrl, Converter={StaticResource ToVisibilityConverter}}" />
                <svgc:SvgViewbox x:Name="SvgViewbox" Source="{Binding Notification.SvgUrl}" HorizontalAlignment="Center"
                                 RenderTransformOrigin="0.5,0.5" Opacity="0.5"
                                 Visibility="{Binding Notification.SvgUrl, Converter={StaticResource ToVisibilityConverter}}">
                    <svgc:SvgViewbox.RenderTransform>
                        <ScaleTransform x:Name="MyAnimatedScaleTransform" ScaleX="0.8" ScaleY="0.8"/>
                    </svgc:SvgViewbox.RenderTransform>
                    <svgc:SvgViewbox.Triggers>
                        <EventTrigger RoutedEvent="svgc:SvgViewbox.Loaded">
                            <BeginStoryboard>
                                <Storyboard RepeatBehavior="Forever" AutoReverse="True">
                                    <DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform"
                                                     Storyboard.TargetProperty="ScaleX"
                                                     To="1.0" Duration="0:0:1" />
                                    <DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform"
                                                     Storyboard.TargetProperty="ScaleY"
                                                     To="1.0" Duration="0:0:1" />
                                    <DoubleAnimation Storyboard.TargetName="SvgViewbox"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1.0" Duration="0:0:1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </svgc:SvgViewbox.Triggers>
                </svgc:SvgViewbox>
                <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="0" IsIndeterminate="True" 
                      Width="40" Height="40" Visibility="{Binding Notification.IsBusy, Converter={StaticResource BoolToVis}}">
                    <ProgressBar.LayoutTransform>
                        <ScaleTransform ScaleX="8" ScaleY="8"/>
                    </ProgressBar.LayoutTransform>
                </ProgressBar>
            </Grid>
        </Border>
    </Grid>
</UserControl>
paulushub commented 1 year ago

The following simple use in user-control works with the SharpVectors.Wpf, .NET 4.7.2

<UserControl x:Class="WpfApp11.UserControl1"
             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:local="clr-namespace:WpfApp11"
             xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <svgc:SvgViewbox Source="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/rg1024_green_grapes.svg" 
                            HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</UserControl>

I do not know what is falling in your codes. Can you name all the packages/versions in your code or post a sample project for testing?

GioviQ commented 1 year ago

Please try https://github.com/GioviQ/SharpVectors.Wpf.1.8.1.bug

paulushub commented 1 year ago

Please try https://github.com/GioviQ/SharpVectors.Wpf.1.8.1.bug

@GioviQ Fix the source Uri. With 1.8.1 there are several improvements and fixes in the support for the Uri to make it work in both design mode and runtime. For the sample given, simply change the Uri to Source="/check-mark.svg" and it will work in both design mode and runtime.

The Uri Source="/WpfApp1;Component/check-mark.svg" is for a resource file in referenced assembly, see Using Pack URIs in Markup. The design mode still tries to make it work, since it scans several possible sources, but it fails in runtime, which does not need all the additional scanning to work if the Uri is valid.

Also, SharpVectors adds support for assembly name with the AppName property, and it this case it will be AppName="WpfApp1".