Add path control #209
Comments
|
I agree with you, but I think it's better to put SVG SMIL support in XAML Standard, SVG is an open standard and a series of tools to create and edit SVG, support SVG makes it easy to create fluid, beautiful, dynamic and animated interfaces. Like this: <Button>...
<SVG >
<rect id="my-rect" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#my-rect"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze" />
</rect>
</SVG>
...</Button>or like this: <Button>...
<SVG URI="icon.svg">
</SVG>
...</Button>
<Style TargetType="Button">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8,4,8,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<SVG URI="Normal.svg">
</SVG>
</VisualState>
<VisualState x:Name="PointerOver">
<SVG URI="PointerOver.svg">
</SVG>
<VisualState x:Name="Pressed">
<SVG>
<rect id="my-rect" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#my-rect"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze" />
</rect>
</SVG>
</VisualState>
<VisualState x:Name="Disabled">
<SVG URI="Disabled.svg">
</SVG>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> |
|
@insinfo ` Use like this
You can search PathButton from Nuget . And Metro Studio provide 5K+ . I also can make a path though Blend . Is very easy. |
|
Yes, what I posted was just an example, this can and should be improved, the great advantage I see of SVG SMIL is that the developer would not have to worry about the graphics and the animations, the designer would do the graphics and the animations in the software of its choice and would deliver the SVGs already ready for the developer |
|
Sorry I don‘t use SVG before . So you mean SVG is contains animation? If Yes .It's so cool . Thank you for let me know it. |
|
Yes SVG support animations: |
|
http://www.bifter.co.uk/issues/17.svg Browser Support and Fallbacks If you need to provide a fallback for SMIL animations, you can test for browser support on-the-fly using Modernizr. If SMIL is not supported, you can then provide some kind of fallback (JavaScript animations, an alternate experience, etc). |
|
@insinfo from what I've been reading looks like SMIL is being moved away from on the web: It's even called out in the article you linked to on css-tricks. |
|
In fact, google chrome is the only one that has marked SMIL as deprecated, but will still support it for a while, since there is not yet a standard that is complete like SMIL, WEB Animation is still in development and has not been finalized by W3C and CSS Animations is not as complete as SMIL. |
|
path is a requested, but considering it is relatively low element, there should be interface just like IPathRender provided where both skiasharp or cairo or things else could come to do the actual work! |
I found path is not in Xamarin.Forms.
I work on WPF. I use a lot of path to replace .png file. So I can change the path fill color by the trigger .Don't need to change .png file and more code. Don't need to add many size of the same .png file. It is very convenient. So can you add path to xaml-standard ?
The text was updated successfully, but these errors were encountered: