Merge pull request #104 from asklar/pathData

Support Path.Data and other Geometry properties

USAGE.md

@@ -185,6 +185,19 @@ const [showState, setShowState] = useState(ContentDialogState.Hidden);
   }} />
 ```
 
+## Path & vector graphics
+
+```jsx
+<Path
+  data="M14,2H12V1H11V2H5V1H4V2H2V14H14ZM4,3V4H5V3h6V4h1V3h1V5H3V3Zm9,10H3V6H13ZM7,10V7H4v3ZM5,8H6V9H5Z"
+  width={16}
+  height={16}
+  fill="red"
+  horizontalAlignment={HorizontalAlignment.Center}
+  verticalAlignment={VerticalAlignment.Center}
+/>
+```
+
 ## Lightweight styling
 
 ```jsx

package/Codegen/Util.cs

@@ -169,6 +169,8 @@ namespace Codegen
                     return ViewManagerPropertyType.String;
                 case $"{XamlNames.XamlNamespace}.Media.FontFamily":
                     return ViewManagerPropertyType.String;
+                case $"{XamlNames.XamlNamespace}.Media.Geometry":
+                    return ViewManagerPropertyType.String;
                 case "Windows.UI.Text.FontWeight":
                     return ViewManagerPropertyType.Number;
                 case $"{XamlNames.XamlNamespace}.Thickness":
@@ -264,6 +266,8 @@ namespace Codegen
                     return "CornerRadius";
                 case $"{XamlNames.XamlNamespace}.Media.FontFamily":
                     return "string";
+                case $"{XamlNames.XamlNamespace}.Media.Geometry":
+                    return "string";
                 case "System.Object":
                     return "object";
                 case "Windows.UI.Text.FontWeight":

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-xaml",
   "title": "React Native Xaml",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Allows using XAML directly, inside of a React Native Windows app",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/Props.ts

@@ -1241,6 +1241,7 @@ export interface NativePasswordBoxProps extends NativeControlProps {
 
 export interface NativePathIconProps extends NativeIconElementProps {
   type: 'Windows.UI.Xaml.Controls.PathIcon';
+  data?: string;
 }
 
 
@@ -2199,6 +2200,7 @@ export interface NativeLineProps extends NativeShapeProps {
 
 export interface NativePathProps extends NativeShapeProps {
   type: 'Windows.UI.Xaml.Shapes.Path';
+  data?: string;
 }
 
 

package/windows/ReactNativeXaml/Codegen/TypeProperties.g.h

@@ -156,6 +156,8 @@ winrt::Windows::Foundation::IInspectable AsUnwrappedType(const winrt::Windows::F
         { MAKE_KEY("cornerRadius"), AsType<winrt::Windows::UI::Xaml::Controls::RelativePanel>,  []() { return winrt::Windows::UI::Xaml::Controls::RelativePanel::CornerRadiusProperty(); }, SetPropValue<winrt::Windows::UI::Xaml::CornerRadius>, ViewManagerPropertyType::Map },
         { MAKE_KEY("cornerRadius"), AsType<winrt::Windows::UI::Xaml::Controls::StackPanel>,  []() { return winrt::Windows::UI::Xaml::Controls::StackPanel::CornerRadiusProperty(); }, SetPropValue<winrt::Windows::UI::Xaml::CornerRadius>, ViewManagerPropertyType::Map },
         { MAKE_KEY("cursor"), AsUnwrappedType<winrt::Windows::UI::Xaml::Documents::ContentLink>,  []() { return winrt::Windows::UI::Xaml::Documents::ContentLink::CursorProperty(); }, SetPropValue<int32_t>, ViewManagerPropertyType::Number },
+        { MAKE_KEY("data"), AsType<winrt::Windows::UI::Xaml::Shapes::Path>,  []() { return winrt::Windows::UI::Xaml::Shapes::Path::DataProperty(); }, SetPropValue<winrt::Windows::UI::Xaml::Media::Geometry>, ViewManagerPropertyType::String },
+        { MAKE_KEY("data"), AsType<winrt::Windows::UI::Xaml::Controls::PathIcon>,  []() { return winrt::Windows::UI::Xaml::Controls::PathIcon::DataProperty(); }, SetPropValue<winrt::Windows::UI::Xaml::Media::Geometry>, ViewManagerPropertyType::String },
         { MAKE_KEY("dataContext"), AsType<winrt::Windows::UI::Xaml::FrameworkElement>,  []() { return winrt::Windows::UI::Xaml::FrameworkElement::DataContextProperty(); }, SetPropValue<winrt::Windows::Foundation::IInspectable>, ViewManagerPropertyType::Map },
         { MAKE_KEY("dataFetchSize"), AsType<winrt::Windows::UI::Xaml::Controls::ListViewBase>,  []() { return winrt::Windows::UI::Xaml::Controls::ListViewBase::DataFetchSizeProperty(); }, SetPropValue<double>, ViewManagerPropertyType::Number },
         { MAKE_KEY("dateFormat"), AsType<winrt::Windows::UI::Xaml::Controls::CalendarDatePicker>,  []() { return winrt::Windows::UI::Xaml::Controls::CalendarDatePicker::DateFormatProperty(); }, SetPropValue<winrt::hstring>, ViewManagerPropertyType::String },
@@ -1024,6 +1026,7 @@ void XamlMetadata::PopulateNativeProps(winrt::Windows::Foundation::Collections::
     nativeProps.Insert(winrt::to_hstring("contentMargin"), ViewManagerPropertyType::Map);
     nativeProps.Insert(winrt::to_hstring("cornerRadius"), ViewManagerPropertyType::Map);
     nativeProps.Insert(winrt::to_hstring("cursor"), ViewManagerPropertyType::Number);
+    nativeProps.Insert(winrt::to_hstring("data"), ViewManagerPropertyType::String);
     nativeProps.Insert(winrt::to_hstring("dataContext"), ViewManagerPropertyType::Map);
     nativeProps.Insert(winrt::to_hstring("dataFetchSize"), ViewManagerPropertyType::Number);
     nativeProps.Insert(winrt::to_hstring("dateFormat"), ViewManagerPropertyType::String);

package/windows/ReactNativeXaml/XamlMetadata.h

@@ -39,6 +39,11 @@ namespace winrt::Microsoft::ReactNative {
     }
   }
 
+  inline void ReadValue(JSValue const& jsValue, xaml::Media::Geometry& value) noexcept {
+    const auto v = winrt::to_hstring(jsValue.AsJSString());
+    value = Markup::XamlBindingHelper::ConvertValue(winrt::xaml_typename<xaml::Media::PathGeometry>(), winrt::box_value(v)).as<xaml::Media::Geometry>();
+  }
+
   inline void ReadValue(JSValue const& jsValue, Windows::UI::Text::FontWeight& value) noexcept {
     value.Weight = jsValue.AsInt16();
   }