locked
VisualBrush in Windows 8.1 RT apps

    Question

  • Hi,

    I am on a halt with my App development.

    Currently I have a program on WPF and I am going to transfer it to a Windows 8.1 app, in the WPF app I use;

    <Grid Width="153" Height="61">
        <Grid.Background>
            <VisualBrush Visual="{DynamicResource logo_coop}" Stretch="Uniform" />
        </Grid.Background>
    </Grid>

    I would like to do the exact same thing on Windows 8.1, but the VisualBrush is not recognized.
    Already set up the Resource like I would in WPF and the resource is a vector path, if anyone is interested!

    Thanks!

    EDIT:Noticed on a rebuild that the resource doesn't work either, with the issue of DynamicResource, so if anyone could help with an equiv. of that to Windows 8.1 RT apps that'd be great!

    -Vincent


    • Edited by Vincent Gio Tuesday, November 18, 2014 7:54 PM
    Tuesday, November 18, 2014 7:45 PM

Answers

  • Hi Vincent,

    I tested with your code I found two interesting things:

    #1, Your Fill property for the Path does not work in Windows Store App, that might be your Path Data is not a closed graph, I think you would like to validate it, if I set stroke color and stroke thickness, it shows correctly.

    <Canvas x:Name="Lager_1" Height="94.985" Canvas.Left="0" Canvas.Top="-0.984" Width="491.907">
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M37.594,49.478C38.525,40.646 40.88,32.563 42.95,24.416 44.671,17.647 46.41,10.881 48.202,4.13 49.216,0.31 49.469,0.097 53.268,0.049 58.431,-0.016 63.596,-0.016 68.76,0.048 72.67,0.096 73.04,0.383 73.988,3.955 77.354,16.653 80.833,29.323 83.596,42.174 84.142,44.711 83.575,47.549 85.727,50.19 86.64,39.586 89.594,29.759 91.312,19.691 91.881,16.354 91.813,15.815 88.493,15.261 85.688,14.793 84.844,13.54 84.986,10.959 85.103,8.8 84.965,6.628 85.017,4.463 85.115,0.375 85.309,0.085 89.196,0.056 98.358,-0.013 107.521,-0.009 116.683,0.053 120.659,0.079 120.872,0.369 120.988,4.338 121.041,6.168 120.913,8.007 121.019,9.834 121.197,12.913 120.884,15.555 117.04,16.082 114.795,16.389 114.95,18.462 114.566,19.961 112.002,29.952 109.52,39.963 107.024,49.97 104.568,59.816 102.15,69.671 99.668,79.51 98.542,83.976 98.49,84.004 94.065,84.028 87.401,84.064 80.737,84.085 74.074,84.016 70.327,83.976 69.813,83.467 69.048,79.917 66.563,68.385 64.114,56.845 61.575,45.325 60.77,41.668 61.07,37.799 59.282,33.764 57.31,49.798 52.865,64.797 49.756,80.077 49.038,83.608 48.444,83.987 44.599,84.022 38.602,84.077 32.604,84.075 26.607,84.026 22.122,83.989 22.013,83.915 20.915,79.473 16.244,60.583 11.61,41.684 6.967,22.787 6.185,19.606 5.958,16.139 1.725,15.235 0.246,14.918 0.026,13.344 0.027,11.941 0.028,9.109 0.095,6.275 0.004,3.446 -0.081,0.78 1.298,0.005 3.716,0.017 13.878,0.065 24.04,-0.012 34.202,0.064 37.557,0.089 37.818,0.479 37.983,3.857 38.048,5.187 38.038,6.524 37.991,7.855 37.921,9.842 38.475,11.957 37.586,13.782 36.635,15.736 34.314,15.027 32.652,15.604 30.346,16.404 30.12,17.579 30.688,19.768 32.482,26.684 34.178,33.629 35.451,40.673 35.781,42.491 35.993,44.281 36.031,46.112 36.053,47.243 36.071,48.395 37.594,49.478" Fill="#FF1E1E1C" Height="84.063" Canvas.Left="0" Stretch="None" Canvas.Top="8.955" Width="121.057"/>
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M40.646,32.67C42.428,27.682 45.038,23.123 47.261,18.363 47.789,17.235 47.462,16.411 46.316,15.992 44.15,15.199 43.965,13.42 43.974,11.508 43.987,8.842 44.052,6.174 43.963,3.511 43.876,0.909 45.117,-0.017 47.6,0 56.598,0.058 65.595,0.048 74.593,0.013 76.847,0.004 78.029,0.886 77.979,3.243 77.934,5.408 77.884,7.581 78.014,9.74 78.198,12.817 77.853,15.426 74.147,16.172 72.7,16.463 72.139,17.801 71.5,18.982 67.15,27.033 62.775,35.072 58.436,43.131 57.095,45.621 55.955,48.211 54.307,50.541 51.275,54.828 50.549,59.666 50.968,64.805 51.127,66.767 51.788,67.678 53.87,68.057 62.027,69.541 62.011,69.625 61.982,77.893 61.979,78.559 62.001,79.227 61.973,79.892 61.816,83.653 61.638,83.922 57.985,83.993 53.322,84.085 48.655,84.02 43.989,84.02 36.158,84.021 28.326,84.062 20.496,84.002 16.238,83.969 16.104,83.76 15.999,79.395 15.97,78.229 15.984,77.062 15.996,75.896 16.054,69.883 16.7,69.129 22.638,68.119 27.969,67.212 27.778,67.203 28.034,61.933 28.216,58.172 26.618,55.156 24.971,52.075 20.266,43.27 15.543,34.473 10.805,25.684 9.701,23.635 8.436,21.67 7.379,19.599 6.353,17.586 5.173,16.024 2.676,15.652 0.812,15.375 -0.027,13.918 0,11.987 0.042,8.988 0.03,5.989 0.014,2.99 0.003,0.87 1.125,0.028 3.139,0.03 13.303,0.042 23.467,0.052 33.63,0.015 35.92,0.006 37.01,0.976 36.964,3.297 36.916,5.795 36.896,8.298 36.99,10.795 37.078,13.158 36.658,15.126 34.029,15.859 32.215,16.365 32.241,17.485 32.947,18.925 35.134,23.389 37.284,27.871 39.448,32.347 39.847,32.454 40.247,32.563 40.646,32.67" Fill="#FF1E1E1C" Height="84.043" Canvas.Left="315.027" Stretch="None" Canvas.Top="8.973" Width="78.053"/>
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M2.713,73.147C2.713,69.981 2.774,66.815 2.693,63.653 2.631,61.176 3.582,59.947 6.192,60.004 10.188,60.093 14.187,60.061 18.184,60.014 20.344,59.989 21.736,60.661 21.698,63.108 21.661,65.583 21.894,67.835 25.222,68.003 28.763,68.182 33.299,65.68 34.213,62.87 34.899,60.762 33.836,57.981 31.378,56.518 28.664,54.904 25.643,53.917 22.614,52.993 18.148,51.628 13.876,49.797 9.813,47.473 5.195,44.834 2.551,40.758 1.147,35.772 -3.207,20.302 5.209,6.426 19.978,2.49 27.362,0.522 34.825,-1.03 42.599,0.847 45.616,1.576 48.871,0.855 51.988,1.815 53.935,2.415 54.731,3.363 54.718,5.317 54.678,11.48 54.69,17.643 54.705,23.805 54.71,25.782 53.961,26.997 51.811,26.993 47.647,26.985 43.483,27.001 39.318,26.985 37.15,26.977 35.885,25.948 35.752,23.698 35.651,22.01 35.655,20.3 33.298,20.06 30.624,19.788 28.318,20.329 26.694,22.636 25.409,24.461 25.334,26.387 26.595,28.222 27.862,30.066 29.749,31.079 31.804,31.92 36.571,33.876 41.409,35.648 46.168,37.641 62.859,44.629 62.653,65.639 52.929,76.348 47.4,82.436 40.435,85.323 32.571,87.067 24.375,88.884 16.35,87.362 8.279,86.81 3.079,86.454 2.746,85.711 2.707,80.642 2.689,78.143 2.704,75.645 2.704,73.147z" Fill="#FF1E1E1C" Height="87.933" Canvas.Left="432.298" Stretch="None" Canvas.Top="6.969" Width="59.609"/>
                <Path Data="M30.681,84.083C21.684,84.084 12.687,84.11 3.69,84.07 0.114,84.054 0.077,83.987 0.018,80.558 -0.033,77.56 0.043,74.56 0.005,71.562 -0.015,69.991 0.466,69.054 2.233,68.977 3.383,68.927 4.516,68.55 5.662,68.343 11.056,67.368 11.058,67.371 11.058,61.688 11.06,47.86 11.074,34.031 11.048,20.203 11.041,16.447 10.985,16.448 7.43,16.014 0.006,15.106 0.006,15.106 0.005,7.851 0.005,0.006 0.005,0.006 7.862,0.006 18.691,0.006 29.521,-0.011 40.35,0.012 46.609,0.025 45.775,-0.502 45.848,5.736 45.86,6.736 45.85,7.736 45.85,8.735 45.847,14.874 45.848,14.882 39.994,15.823 39.175,15.956 38.331,16.083 37.51,16.03 35.204,15.882 34.643,17.171 34.785,19.131 34.808,19.462 34.783,19.798 34.783,20.13 34.782,33.792 34.776,47.454 34.788,61.116 34.79,63.05 34.294,65.076 37.578,65.103 42.76,65.143 43.028,65.2 43.683,61.556 44.609,56.405 44.609,56.397 49.683,56.389 53.015,56.383 56.347,56.425 59.679,56.397 61.339,56.386 62.089,57.124 62.084,58.794 62.06,66.458 62.026,74.122 62.093,81.785 62.117,84.486 60.282,84.071 58.671,84.075 49.341,84.091 40.011,84.083 30.681,84.083" Fill="#FFE30B18" Height="84.096" Canvas.Left="254.054" Stretch="None" Canvas.Top="8.955" Width="62.094"/>
                <Path Data="M31.282,84.427C22.789,84.429 14.295,84.458 5.802,84.419 -0.423,84.39 0.411,85.105 0.328,78.718 0.318,77.885 0.326,77.052 0.327,76.22 0.328,69.395 0.328,69.395 7.093,68.465 11.301,67.886 11.338,67.886 11.343,63.829 11.36,49.674 11.357,35.519 11.345,21.363 11.342,16.868 11.32,16.868 6.985,16.318 6.82,16.297 6.654,16.282 6.489,16.259 0.329,15.38 0.244,15.378 0.366,8.987 0.419,6.226 -0.884,2.753 1.133,0.886 2.906,-0.754 6.232,0.389 8.865,0.375 19.69,0.315 30.515,0.334 41.34,0.359 45.581,0.368 45.581,0.41 45.638,4.787 45.645,5.287 45.662,5.788 45.636,6.286 45.486,9.093 46.745,12.572 45.074,14.528 43.448,16.431 39.957,16.391 37.135,16.396 34.742,16.4 34.566,17.937 34.571,19.75 34.59,26.745 34.574,33.739 34.574,40.734 34.574,47.896 34.645,55.058 34.538,62.216 34.503,64.572 35.26,65.647 37.684,65.388 38.673,65.282 39.686,65.309 40.679,65.384 42.507,65.521 43.176,64.827 43.494,62.909 44.519,56.713 44.639,56.732 50.782,56.732 53.78,56.732 56.78,56.81 59.775,56.718 61.741,56.657 62.404,57.511 62.392,59.388 62.343,66.882 62.301,74.376 62.41,81.869 62.447,84.34 61.103,84.45 59.261,84.443 49.934,84.406 40.608,84.425 31.282,84.427" Fill="#FFE30B18" Height="84.443" Canvas.Left="181.631" Stretch="None" Canvas.Top="8.611" Width="62.41"/>
                <Path Data="M34.16,23.066C34.16,29.063 34.134,35.06 34.169,41.056 34.194,45.354 34.229,45.353 38.229,46.288 44.146,47.67 44.165,47.67 44.146,54.13 44.12,62.673 44.935,62.056 36.463,62.063 25.968,62.072 15.474,62.093 4.979,62.05 0.389,62.033 0.234,61.836 0.167,57.263 0.131,54.766 0.169,52.267 0.204,49.769 0.225,48.238 0.919,47.31 2.542,47.075 4.184,46.837 5.796,46.403 7.431,46.109 11.029,45.462 11.108,45.476 11.14,41.681 11.199,34.853 11.081,28.021 11.195,21.193 11.237,18.632 10.527,16.997 7.768,16.748 7.443,16.718 7.116,16.591 6.814,16.459 4.85,15.587 2.097,17.039 0.74,15 -0.578,13.019 0.292,10.451 0.171,8.144 0.101,6.816 0.2,5.479 0.177,4.147 0.141,2.094 1.162,1.379 3.165,1.005 12.429,-0.717 21.762,0.361 31.057,0.08 33.498,0.005 34.173,1.414 34.16,3.577 34.122,10.074 34.146,16.57 34.146,23.066z" Fill="#FF1E1E1C" Height="62.075" Canvas.Left="127.848" Stretch="None" Canvas.Top="30.929" Width="44.157"/>
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M13.398,26.977C5.043,26.965 -0.031,21.975 0,13.799 0.029,5.586 5.742,-0.255 13.719,0.009 20.338,0.228 27.318,5.924 27.081,13.348 26.82,21.539 21.616,26.988 13.398,26.977" Fill="#FF1E1E1C" Height="26.977" Canvas.Left="394" Stretch="None" Canvas.Top="34.022" Width="27.087" />
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M0,13.331C-0.041,5.364 5.036,0.407 12.806,0.018 21.622,-0.421 26.982,7.034 27.156,13.267 27.346,20.038 21.244,26.997 13.754,27.095 5.772,27.2 0.043,21.503 0,13.331" Fill="#FF1E1E1C" Height="27.097" Canvas.Left="393.999" Stretch="None" Canvas.Top="67.888" Width="27.161"/>
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M13.492,25.99C5.66,25.989 0.039,20.619 0,13.099 -0.039,5.601 5.664,0.039 13.431,0 20.997,-0.037 27.012,5.738 26.998,13.026 26.984,20.492 21.256,25.991 13.492,25.99" Fill="#FF1E1E1C" Height="25.99" Canvas.Left="137.007" Stretch="None" Canvas.Top="0" Width="26.998"/>
            </Canvas>   


    #2, If I package these code in a UserControl, then I can reference the user control everywhere in my app.

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <local:MyUserControl1 HorizontalAlignment="Left" Margin="346,387,0,0" VerticalAlignment="Top"/>
    
        </Grid>

    The final result looks like:

    Is this what you want?

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, December 02, 2014 9:48 AM
    Moderator
  • Yes, it is resizable, do something with transform like below:

            <local:MyUserControl1  HorizontalAlignment="Left" Margin="346,387,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
                <local:MyUserControl1.RenderTransform>
                    <CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
                </local:MyUserControl1.RenderTransform>
            </local:MyUserControl1>

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, December 03, 2014 5:27 AM
    Moderator

All replies

  • VisualBrush isnt supported... think you have to put the path in a other grid and then just as content..

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Tuesday, November 18, 2014 8:00 PM
  • So instead of having a resource I copy paste the same code to each and every place that I need the path at?
    Tuesday, November 18, 2014 8:21 PM
  • this way you can make the path reuseable:

        <Page.Resources>
            <Style TargetType="Path" x:Key="MyPath">
                <Setter Property="Data" Value="M369.568,341.5 L522.776,419.858 L597.625,325.127" />
            </Style>
        </Page.Resources>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        	<Path Style="{StaticResource MyPath}" Fill="#FF1212AE" HorizontalAlignment="Left" Height="95.731" Margin="369.068,324.627,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="229.057"/>
    
        </Grid>


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Tuesday, November 18, 2014 8:45 PM
  • Hi Dave,

    So it is not possible to do this trough an external xaml?

    As my paths are 20+ each.

    -Vincent

    Wednesday, November 19, 2014 1:09 PM
  • You can define a special xaml file with just the Styles. Use ResourceDictionaries for this

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Wednesday, November 19, 2014 1:12 PM
  • Great, and just to be sure.. This is the code used in the xaml file:

            <Style TargetType="Path" x:Key="MyPath">
                <Setter Property="Data" Value="M369.568,341.5 L522.776,419.858 L597.625,325.127" />
            </Style>

    And the rest will be like shown.

    Wednesday, November 19, 2014 1:13 PM
  • yes, but you also can add more properties to the style and reuse that.  

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Wednesday, November 19, 2014 1:35 PM
  • Alright,

    Can't seem to get it to work. This is the code imported with Blend

    <Canvas x:Name="Lager_1" Height="94.985" Canvas.Left="0" Canvas.Top="-0.984" Width="491.907">
    			<Path Data="M37.594,49.478C38.525,40.646 40.88,32.563 42.95,24.416 44.671,17.647 46.41,10.881 48.202,4.13 49.216,0.31 49.469,0.097 53.268,0.049 58.431,-0.016 63.596,-0.016 68.76,0.048 72.67,0.096 73.04,0.383 73.988,3.955 77.354,16.653 80.833,29.323 83.596,42.174 84.142,44.711 83.575,47.549 85.727,50.19 86.64,39.586 89.594,29.759 91.312,19.691 91.881,16.354 91.813,15.815 88.493,15.261 85.688,14.793 84.844,13.54 84.986,10.959 85.103,8.8 84.965,6.628 85.017,4.463 85.115,0.375 85.309,0.085 89.196,0.056 98.358,-0.013 107.521,-0.009 116.683,0.053 120.659,0.079 120.872,0.369 120.988,4.338 121.041,6.168 120.913,8.007 121.019,9.834 121.197,12.913 120.884,15.555 117.04,16.082 114.795,16.389 114.95,18.462 114.566,19.961 112.002,29.952 109.52,39.963 107.024,49.97 104.568,59.816 102.15,69.671 99.668,79.51 98.542,83.976 98.49,84.004 94.065,84.028 87.401,84.064 80.737,84.085 74.074,84.016 70.327,83.976 69.813,83.467 69.048,79.917 66.563,68.385 64.114,56.845 61.575,45.325 60.77,41.668 61.07,37.799 59.282,33.764 57.31,49.798 52.865,64.797 49.756,80.077 49.038,83.608 48.444,83.987 44.599,84.022 38.602,84.077 32.604,84.075 26.607,84.026 22.122,83.989 22.013,83.915 20.915,79.473 16.244,60.583 11.61,41.684 6.967,22.787 6.185,19.606 5.958,16.139 1.725,15.235 0.246,14.918 0.026,13.344 0.027,11.941 0.028,9.109 0.095,6.275 0.004,3.446 -0.081,0.78 1.298,0.005 3.716,0.017 13.878,0.065 24.04,-0.012 34.202,0.064 37.557,0.089 37.818,0.479 37.983,3.857 38.048,5.187 38.038,6.524 37.991,7.855 37.921,9.842 38.475,11.957 37.586,13.782 36.635,15.736 34.314,15.027 32.652,15.604 30.346,16.404 30.12,17.579 30.688,19.768 32.482,26.684 34.178,33.629 35.451,40.673 35.781,42.491 35.993,44.281 36.031,46.112 36.053,47.243 36.071,48.395 37.594,49.478" Fill="#FF1E1E1C" Height="84.063" Canvas.Left="0" Stretch="None" Canvas.Top="8.955" Width="121.057"/>
    			<Path Data="M40.646,32.67C42.428,27.682 45.038,23.123 47.261,18.363 47.789,17.235 47.462,16.411 46.316,15.992 44.15,15.199 43.965,13.42 43.974,11.508 43.987,8.842 44.052,6.174 43.963,3.511 43.876,0.909 45.117,-0.017 47.6,0 56.598,0.058 65.595,0.048 74.593,0.013 76.847,0.004 78.029,0.886 77.979,3.243 77.934,5.408 77.884,7.581 78.014,9.74 78.198,12.817 77.853,15.426 74.147,16.172 72.7,16.463 72.139,17.801 71.5,18.982 67.15,27.033 62.775,35.072 58.436,43.131 57.095,45.621 55.955,48.211 54.307,50.541 51.275,54.828 50.549,59.666 50.968,64.805 51.127,66.767 51.788,67.678 53.87,68.057 62.027,69.541 62.011,69.625 61.982,77.893 61.979,78.559 62.001,79.227 61.973,79.892 61.816,83.653 61.638,83.922 57.985,83.993 53.322,84.085 48.655,84.02 43.989,84.02 36.158,84.021 28.326,84.062 20.496,84.002 16.238,83.969 16.104,83.76 15.999,79.395 15.97,78.229 15.984,77.062 15.996,75.896 16.054,69.883 16.7,69.129 22.638,68.119 27.969,67.212 27.778,67.203 28.034,61.933 28.216,58.172 26.618,55.156 24.971,52.075 20.266,43.27 15.543,34.473 10.805,25.684 9.701,23.635 8.436,21.67 7.379,19.599 6.353,17.586 5.173,16.024 2.676,15.652 0.812,15.375 -0.027,13.918 0,11.987 0.042,8.988 0.03,5.989 0.014,2.99 0.003,0.87 1.125,0.028 3.139,0.03 13.303,0.042 23.467,0.052 33.63,0.015 35.92,0.006 37.01,0.976 36.964,3.297 36.916,5.795 36.896,8.298 36.99,10.795 37.078,13.158 36.658,15.126 34.029,15.859 32.215,16.365 32.241,17.485 32.947,18.925 35.134,23.389 37.284,27.871 39.448,32.347 39.847,32.454 40.247,32.563 40.646,32.67" Fill="#FF1E1E1C" Height="84.043" Canvas.Left="315.027" Stretch="None" Canvas.Top="8.973" Width="78.053"/>
    			<Path Data="M2.713,73.147C2.713,69.981 2.774,66.815 2.693,63.653 2.631,61.176 3.582,59.947 6.192,60.004 10.188,60.093 14.187,60.061 18.184,60.014 20.344,59.989 21.736,60.661 21.698,63.108 21.661,65.583 21.894,67.835 25.222,68.003 28.763,68.182 33.299,65.68 34.213,62.87 34.899,60.762 33.836,57.981 31.378,56.518 28.664,54.904 25.643,53.917 22.614,52.993 18.148,51.628 13.876,49.797 9.813,47.473 5.195,44.834 2.551,40.758 1.147,35.772 -3.207,20.302 5.209,6.426 19.978,2.49 27.362,0.522 34.825,-1.03 42.599,0.847 45.616,1.576 48.871,0.855 51.988,1.815 53.935,2.415 54.731,3.363 54.718,5.317 54.678,11.48 54.69,17.643 54.705,23.805 54.71,25.782 53.961,26.997 51.811,26.993 47.647,26.985 43.483,27.001 39.318,26.985 37.15,26.977 35.885,25.948 35.752,23.698 35.651,22.01 35.655,20.3 33.298,20.06 30.624,19.788 28.318,20.329 26.694,22.636 25.409,24.461 25.334,26.387 26.595,28.222 27.862,30.066 29.749,31.079 31.804,31.92 36.571,33.876 41.409,35.648 46.168,37.641 62.859,44.629 62.653,65.639 52.929,76.348 47.4,82.436 40.435,85.323 32.571,87.067 24.375,88.884 16.35,87.362 8.279,86.81 3.079,86.454 2.746,85.711 2.707,80.642 2.689,78.143 2.704,75.645 2.704,73.147z" Fill="#FF1E1E1C" Height="87.933" Canvas.Left="432.298" Stretch="None" Canvas.Top="6.969" Width="59.609"/>
    			<Path Data="M30.681,84.083C21.684,84.084 12.687,84.11 3.69,84.07 0.114,84.054 0.077,83.987 0.018,80.558 -0.033,77.56 0.043,74.56 0.005,71.562 -0.015,69.991 0.466,69.054 2.233,68.977 3.383,68.927 4.516,68.55 5.662,68.343 11.056,67.368 11.058,67.371 11.058,61.688 11.06,47.86 11.074,34.031 11.048,20.203 11.041,16.447 10.985,16.448 7.43,16.014 0.006,15.106 0.006,15.106 0.005,7.851 0.005,0.006 0.005,0.006 7.862,0.006 18.691,0.006 29.521,-0.011 40.35,0.012 46.609,0.025 45.775,-0.502 45.848,5.736 45.86,6.736 45.85,7.736 45.85,8.735 45.847,14.874 45.848,14.882 39.994,15.823 39.175,15.956 38.331,16.083 37.51,16.03 35.204,15.882 34.643,17.171 34.785,19.131 34.808,19.462 34.783,19.798 34.783,20.13 34.782,33.792 34.776,47.454 34.788,61.116 34.79,63.05 34.294,65.076 37.578,65.103 42.76,65.143 43.028,65.2 43.683,61.556 44.609,56.405 44.609,56.397 49.683,56.389 53.015,56.383 56.347,56.425 59.679,56.397 61.339,56.386 62.089,57.124 62.084,58.794 62.06,66.458 62.026,74.122 62.093,81.785 62.117,84.486 60.282,84.071 58.671,84.075 49.341,84.091 40.011,84.083 30.681,84.083" Fill="#FFE30B18" Height="84.096" Canvas.Left="254.054" Stretch="None" Canvas.Top="8.955" Width="62.094"/>
    			<Path Data="M31.282,84.427C22.789,84.429 14.295,84.458 5.802,84.419 -0.423,84.39 0.411,85.105 0.328,78.718 0.318,77.885 0.326,77.052 0.327,76.22 0.328,69.395 0.328,69.395 7.093,68.465 11.301,67.886 11.338,67.886 11.343,63.829 11.36,49.674 11.357,35.519 11.345,21.363 11.342,16.868 11.32,16.868 6.985,16.318 6.82,16.297 6.654,16.282 6.489,16.259 0.329,15.38 0.244,15.378 0.366,8.987 0.419,6.226 -0.884,2.753 1.133,0.886 2.906,-0.754 6.232,0.389 8.865,0.375 19.69,0.315 30.515,0.334 41.34,0.359 45.581,0.368 45.581,0.41 45.638,4.787 45.645,5.287 45.662,5.788 45.636,6.286 45.486,9.093 46.745,12.572 45.074,14.528 43.448,16.431 39.957,16.391 37.135,16.396 34.742,16.4 34.566,17.937 34.571,19.75 34.59,26.745 34.574,33.739 34.574,40.734 34.574,47.896 34.645,55.058 34.538,62.216 34.503,64.572 35.26,65.647 37.684,65.388 38.673,65.282 39.686,65.309 40.679,65.384 42.507,65.521 43.176,64.827 43.494,62.909 44.519,56.713 44.639,56.732 50.782,56.732 53.78,56.732 56.78,56.81 59.775,56.718 61.741,56.657 62.404,57.511 62.392,59.388 62.343,66.882 62.301,74.376 62.41,81.869 62.447,84.34 61.103,84.45 59.261,84.443 49.934,84.406 40.608,84.425 31.282,84.427" Fill="#FFE30B18" Height="84.443" Canvas.Left="181.631" Stretch="None" Canvas.Top="8.611" Width="62.41"/>
    			<Path Data="M34.16,23.066C34.16,29.063 34.134,35.06 34.169,41.056 34.194,45.354 34.229,45.353 38.229,46.288 44.146,47.67 44.165,47.67 44.146,54.13 44.12,62.673 44.935,62.056 36.463,62.063 25.968,62.072 15.474,62.093 4.979,62.05 0.389,62.033 0.234,61.836 0.167,57.263 0.131,54.766 0.169,52.267 0.204,49.769 0.225,48.238 0.919,47.31 2.542,47.075 4.184,46.837 5.796,46.403 7.431,46.109 11.029,45.462 11.108,45.476 11.14,41.681 11.199,34.853 11.081,28.021 11.195,21.193 11.237,18.632 10.527,16.997 7.768,16.748 7.443,16.718 7.116,16.591 6.814,16.459 4.85,15.587 2.097,17.039 0.74,15 -0.578,13.019 0.292,10.451 0.171,8.144 0.101,6.816 0.2,5.479 0.177,4.147 0.141,2.094 1.162,1.379 3.165,1.005 12.429,-0.717 21.762,0.361 31.057,0.08 33.498,0.005 34.173,1.414 34.16,3.577 34.122,10.074 34.146,16.57 34.146,23.066z" Fill="#FF1E1E1C" Height="62.075" Canvas.Left="127.848" Stretch="None" Canvas.Top="30.929" Width="44.157"/>
    			<Path Data="M13.398,26.977C5.043,26.965 -0.031,21.975 0,13.799 0.029,5.586 5.742,-0.255 13.719,0.009 20.338,0.228 27.318,5.924 27.081,13.348 26.82,21.539 21.616,26.988 13.398,26.977" Fill="#FF1E1E1C" Height="26.977" Canvas.Left="394" Stretch="None" Canvas.Top="34.022" Width="27.087"/>
    			<Path Data="M0,13.331C-0.041,5.364 5.036,0.407 12.806,0.018 21.622,-0.421 26.982,7.034 27.156,13.267 27.346,20.038 21.244,26.997 13.754,27.095 5.772,27.2 0.043,21.503 0,13.331" Fill="#FF1E1E1C" Height="27.097" Canvas.Left="393.999" Stretch="None" Canvas.Top="67.888" Width="27.161"/>
    			<Path Data="M13.492,25.99C5.66,25.989 0.039,20.619 0,13.099 -0.039,5.601 5.664,0.039 13.431,0 20.997,-0.037 27.012,5.738 26.998,13.026 26.984,20.492 21.256,25.991 13.492,25.99" Fill="#FF1E1E1C" Height="25.99" Canvas.Left="137.007" Stretch="None" Canvas.Top="0" Width="26.998"/>
    		</Canvas>
    	</Canvas>

    Can't seem to get it into a ResourceDictionary like over at WPF.

    -Vincent

    Wednesday, November 19, 2014 1:50 PM
  • maybe i misunderstood but you can't make a style that defines all the different path elements. just pulling out the data attribute to make it smalller and mroe readable.

    You can put this in a custom control / user control to make it more reusable.


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Wednesday, November 19, 2014 2:03 PM
  • Aha, I tried the custom control aswell, but it wouldn't show in my page.

    The actual control etc was there, but no thing else. No paths nothing.

    Wednesday, November 19, 2014 2:04 PM
  • I am still in need of assistance. If anyone knows the answer, please reply.

    Thanks!

    Sunday, November 23, 2014 5:45 PM
  • Hi Vincent,

    I tested with your code I found two interesting things:

    #1, Your Fill property for the Path does not work in Windows Store App, that might be your Path Data is not a closed graph, I think you would like to validate it, if I set stroke color and stroke thickness, it shows correctly.

    <Canvas x:Name="Lager_1" Height="94.985" Canvas.Left="0" Canvas.Top="-0.984" Width="491.907">
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M37.594,49.478C38.525,40.646 40.88,32.563 42.95,24.416 44.671,17.647 46.41,10.881 48.202,4.13 49.216,0.31 49.469,0.097 53.268,0.049 58.431,-0.016 63.596,-0.016 68.76,0.048 72.67,0.096 73.04,0.383 73.988,3.955 77.354,16.653 80.833,29.323 83.596,42.174 84.142,44.711 83.575,47.549 85.727,50.19 86.64,39.586 89.594,29.759 91.312,19.691 91.881,16.354 91.813,15.815 88.493,15.261 85.688,14.793 84.844,13.54 84.986,10.959 85.103,8.8 84.965,6.628 85.017,4.463 85.115,0.375 85.309,0.085 89.196,0.056 98.358,-0.013 107.521,-0.009 116.683,0.053 120.659,0.079 120.872,0.369 120.988,4.338 121.041,6.168 120.913,8.007 121.019,9.834 121.197,12.913 120.884,15.555 117.04,16.082 114.795,16.389 114.95,18.462 114.566,19.961 112.002,29.952 109.52,39.963 107.024,49.97 104.568,59.816 102.15,69.671 99.668,79.51 98.542,83.976 98.49,84.004 94.065,84.028 87.401,84.064 80.737,84.085 74.074,84.016 70.327,83.976 69.813,83.467 69.048,79.917 66.563,68.385 64.114,56.845 61.575,45.325 60.77,41.668 61.07,37.799 59.282,33.764 57.31,49.798 52.865,64.797 49.756,80.077 49.038,83.608 48.444,83.987 44.599,84.022 38.602,84.077 32.604,84.075 26.607,84.026 22.122,83.989 22.013,83.915 20.915,79.473 16.244,60.583 11.61,41.684 6.967,22.787 6.185,19.606 5.958,16.139 1.725,15.235 0.246,14.918 0.026,13.344 0.027,11.941 0.028,9.109 0.095,6.275 0.004,3.446 -0.081,0.78 1.298,0.005 3.716,0.017 13.878,0.065 24.04,-0.012 34.202,0.064 37.557,0.089 37.818,0.479 37.983,3.857 38.048,5.187 38.038,6.524 37.991,7.855 37.921,9.842 38.475,11.957 37.586,13.782 36.635,15.736 34.314,15.027 32.652,15.604 30.346,16.404 30.12,17.579 30.688,19.768 32.482,26.684 34.178,33.629 35.451,40.673 35.781,42.491 35.993,44.281 36.031,46.112 36.053,47.243 36.071,48.395 37.594,49.478" Fill="#FF1E1E1C" Height="84.063" Canvas.Left="0" Stretch="None" Canvas.Top="8.955" Width="121.057"/>
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M40.646,32.67C42.428,27.682 45.038,23.123 47.261,18.363 47.789,17.235 47.462,16.411 46.316,15.992 44.15,15.199 43.965,13.42 43.974,11.508 43.987,8.842 44.052,6.174 43.963,3.511 43.876,0.909 45.117,-0.017 47.6,0 56.598,0.058 65.595,0.048 74.593,0.013 76.847,0.004 78.029,0.886 77.979,3.243 77.934,5.408 77.884,7.581 78.014,9.74 78.198,12.817 77.853,15.426 74.147,16.172 72.7,16.463 72.139,17.801 71.5,18.982 67.15,27.033 62.775,35.072 58.436,43.131 57.095,45.621 55.955,48.211 54.307,50.541 51.275,54.828 50.549,59.666 50.968,64.805 51.127,66.767 51.788,67.678 53.87,68.057 62.027,69.541 62.011,69.625 61.982,77.893 61.979,78.559 62.001,79.227 61.973,79.892 61.816,83.653 61.638,83.922 57.985,83.993 53.322,84.085 48.655,84.02 43.989,84.02 36.158,84.021 28.326,84.062 20.496,84.002 16.238,83.969 16.104,83.76 15.999,79.395 15.97,78.229 15.984,77.062 15.996,75.896 16.054,69.883 16.7,69.129 22.638,68.119 27.969,67.212 27.778,67.203 28.034,61.933 28.216,58.172 26.618,55.156 24.971,52.075 20.266,43.27 15.543,34.473 10.805,25.684 9.701,23.635 8.436,21.67 7.379,19.599 6.353,17.586 5.173,16.024 2.676,15.652 0.812,15.375 -0.027,13.918 0,11.987 0.042,8.988 0.03,5.989 0.014,2.99 0.003,0.87 1.125,0.028 3.139,0.03 13.303,0.042 23.467,0.052 33.63,0.015 35.92,0.006 37.01,0.976 36.964,3.297 36.916,5.795 36.896,8.298 36.99,10.795 37.078,13.158 36.658,15.126 34.029,15.859 32.215,16.365 32.241,17.485 32.947,18.925 35.134,23.389 37.284,27.871 39.448,32.347 39.847,32.454 40.247,32.563 40.646,32.67" Fill="#FF1E1E1C" Height="84.043" Canvas.Left="315.027" Stretch="None" Canvas.Top="8.973" Width="78.053"/>
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M2.713,73.147C2.713,69.981 2.774,66.815 2.693,63.653 2.631,61.176 3.582,59.947 6.192,60.004 10.188,60.093 14.187,60.061 18.184,60.014 20.344,59.989 21.736,60.661 21.698,63.108 21.661,65.583 21.894,67.835 25.222,68.003 28.763,68.182 33.299,65.68 34.213,62.87 34.899,60.762 33.836,57.981 31.378,56.518 28.664,54.904 25.643,53.917 22.614,52.993 18.148,51.628 13.876,49.797 9.813,47.473 5.195,44.834 2.551,40.758 1.147,35.772 -3.207,20.302 5.209,6.426 19.978,2.49 27.362,0.522 34.825,-1.03 42.599,0.847 45.616,1.576 48.871,0.855 51.988,1.815 53.935,2.415 54.731,3.363 54.718,5.317 54.678,11.48 54.69,17.643 54.705,23.805 54.71,25.782 53.961,26.997 51.811,26.993 47.647,26.985 43.483,27.001 39.318,26.985 37.15,26.977 35.885,25.948 35.752,23.698 35.651,22.01 35.655,20.3 33.298,20.06 30.624,19.788 28.318,20.329 26.694,22.636 25.409,24.461 25.334,26.387 26.595,28.222 27.862,30.066 29.749,31.079 31.804,31.92 36.571,33.876 41.409,35.648 46.168,37.641 62.859,44.629 62.653,65.639 52.929,76.348 47.4,82.436 40.435,85.323 32.571,87.067 24.375,88.884 16.35,87.362 8.279,86.81 3.079,86.454 2.746,85.711 2.707,80.642 2.689,78.143 2.704,75.645 2.704,73.147z" Fill="#FF1E1E1C" Height="87.933" Canvas.Left="432.298" Stretch="None" Canvas.Top="6.969" Width="59.609"/>
                <Path Data="M30.681,84.083C21.684,84.084 12.687,84.11 3.69,84.07 0.114,84.054 0.077,83.987 0.018,80.558 -0.033,77.56 0.043,74.56 0.005,71.562 -0.015,69.991 0.466,69.054 2.233,68.977 3.383,68.927 4.516,68.55 5.662,68.343 11.056,67.368 11.058,67.371 11.058,61.688 11.06,47.86 11.074,34.031 11.048,20.203 11.041,16.447 10.985,16.448 7.43,16.014 0.006,15.106 0.006,15.106 0.005,7.851 0.005,0.006 0.005,0.006 7.862,0.006 18.691,0.006 29.521,-0.011 40.35,0.012 46.609,0.025 45.775,-0.502 45.848,5.736 45.86,6.736 45.85,7.736 45.85,8.735 45.847,14.874 45.848,14.882 39.994,15.823 39.175,15.956 38.331,16.083 37.51,16.03 35.204,15.882 34.643,17.171 34.785,19.131 34.808,19.462 34.783,19.798 34.783,20.13 34.782,33.792 34.776,47.454 34.788,61.116 34.79,63.05 34.294,65.076 37.578,65.103 42.76,65.143 43.028,65.2 43.683,61.556 44.609,56.405 44.609,56.397 49.683,56.389 53.015,56.383 56.347,56.425 59.679,56.397 61.339,56.386 62.089,57.124 62.084,58.794 62.06,66.458 62.026,74.122 62.093,81.785 62.117,84.486 60.282,84.071 58.671,84.075 49.341,84.091 40.011,84.083 30.681,84.083" Fill="#FFE30B18" Height="84.096" Canvas.Left="254.054" Stretch="None" Canvas.Top="8.955" Width="62.094"/>
                <Path Data="M31.282,84.427C22.789,84.429 14.295,84.458 5.802,84.419 -0.423,84.39 0.411,85.105 0.328,78.718 0.318,77.885 0.326,77.052 0.327,76.22 0.328,69.395 0.328,69.395 7.093,68.465 11.301,67.886 11.338,67.886 11.343,63.829 11.36,49.674 11.357,35.519 11.345,21.363 11.342,16.868 11.32,16.868 6.985,16.318 6.82,16.297 6.654,16.282 6.489,16.259 0.329,15.38 0.244,15.378 0.366,8.987 0.419,6.226 -0.884,2.753 1.133,0.886 2.906,-0.754 6.232,0.389 8.865,0.375 19.69,0.315 30.515,0.334 41.34,0.359 45.581,0.368 45.581,0.41 45.638,4.787 45.645,5.287 45.662,5.788 45.636,6.286 45.486,9.093 46.745,12.572 45.074,14.528 43.448,16.431 39.957,16.391 37.135,16.396 34.742,16.4 34.566,17.937 34.571,19.75 34.59,26.745 34.574,33.739 34.574,40.734 34.574,47.896 34.645,55.058 34.538,62.216 34.503,64.572 35.26,65.647 37.684,65.388 38.673,65.282 39.686,65.309 40.679,65.384 42.507,65.521 43.176,64.827 43.494,62.909 44.519,56.713 44.639,56.732 50.782,56.732 53.78,56.732 56.78,56.81 59.775,56.718 61.741,56.657 62.404,57.511 62.392,59.388 62.343,66.882 62.301,74.376 62.41,81.869 62.447,84.34 61.103,84.45 59.261,84.443 49.934,84.406 40.608,84.425 31.282,84.427" Fill="#FFE30B18" Height="84.443" Canvas.Left="181.631" Stretch="None" Canvas.Top="8.611" Width="62.41"/>
                <Path Data="M34.16,23.066C34.16,29.063 34.134,35.06 34.169,41.056 34.194,45.354 34.229,45.353 38.229,46.288 44.146,47.67 44.165,47.67 44.146,54.13 44.12,62.673 44.935,62.056 36.463,62.063 25.968,62.072 15.474,62.093 4.979,62.05 0.389,62.033 0.234,61.836 0.167,57.263 0.131,54.766 0.169,52.267 0.204,49.769 0.225,48.238 0.919,47.31 2.542,47.075 4.184,46.837 5.796,46.403 7.431,46.109 11.029,45.462 11.108,45.476 11.14,41.681 11.199,34.853 11.081,28.021 11.195,21.193 11.237,18.632 10.527,16.997 7.768,16.748 7.443,16.718 7.116,16.591 6.814,16.459 4.85,15.587 2.097,17.039 0.74,15 -0.578,13.019 0.292,10.451 0.171,8.144 0.101,6.816 0.2,5.479 0.177,4.147 0.141,2.094 1.162,1.379 3.165,1.005 12.429,-0.717 21.762,0.361 31.057,0.08 33.498,0.005 34.173,1.414 34.16,3.577 34.122,10.074 34.146,16.57 34.146,23.066z" Fill="#FF1E1E1C" Height="62.075" Canvas.Left="127.848" Stretch="None" Canvas.Top="30.929" Width="44.157"/>
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M13.398,26.977C5.043,26.965 -0.031,21.975 0,13.799 0.029,5.586 5.742,-0.255 13.719,0.009 20.338,0.228 27.318,5.924 27.081,13.348 26.82,21.539 21.616,26.988 13.398,26.977" Fill="#FF1E1E1C" Height="26.977" Canvas.Left="394" Stretch="None" Canvas.Top="34.022" Width="27.087" />
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M0,13.331C-0.041,5.364 5.036,0.407 12.806,0.018 21.622,-0.421 26.982,7.034 27.156,13.267 27.346,20.038 21.244,26.997 13.754,27.095 5.772,27.2 0.043,21.503 0,13.331" Fill="#FF1E1E1C" Height="27.097" Canvas.Left="393.999" Stretch="None" Canvas.Top="67.888" Width="27.161"/>
                <Path Stroke="AliceBlue" StrokeThickness="5" Data="M13.492,25.99C5.66,25.989 0.039,20.619 0,13.099 -0.039,5.601 5.664,0.039 13.431,0 20.997,-0.037 27.012,5.738 26.998,13.026 26.984,20.492 21.256,25.991 13.492,25.99" Fill="#FF1E1E1C" Height="25.99" Canvas.Left="137.007" Stretch="None" Canvas.Top="0" Width="26.998"/>
            </Canvas>   


    #2, If I package these code in a UserControl, then I can reference the user control everywhere in my app.

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <local:MyUserControl1 HorizontalAlignment="Left" Margin="346,387,0,0" VerticalAlignment="Top"/>
    
        </Grid>

    The final result looks like:

    Is this what you want?

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, December 02, 2014 9:48 AM
    Moderator
  • Yes, along those lines :)

    Would this be rezisable? My plan is to use the same resource in different sizes at different pages.

    Tuesday, December 02, 2014 7:05 PM
  • Yes, it is resizable, do something with transform like below:

            <local:MyUserControl1  HorizontalAlignment="Left" Margin="346,387,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
                <local:MyUserControl1.RenderTransform>
                    <CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
                </local:MyUserControl1.RenderTransform>
            </local:MyUserControl1>

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, December 03, 2014 5:27 AM
    Moderator
  • Hi,

    sorry for the late reply

    Code works, but seems to be something wrong;

    The dark spot inside a tile is my grid with the vector. It doesn't show up, resized it aswell.

    -Vincent

    Monday, December 08, 2014 11:10 AM
  • Hi Vincent,

    I still want to know how you put the user control to the screen, looks like you are using a GridView, would you share your code with us?

    I cannot reproduce your situation simply test on my machine, I put the UserControl in a GridView and everything works fine.

            <GridView HorizontalAlignment="Left" Height="186" Margin="91,194,0,0" VerticalAlignment="Top" Width="1105">
                <GridViewItem Background="Blue">
                    <local:MyUserControl1  HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
                        <local:MyUserControl1.RenderTransform>
                            <CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
                        </local:MyUserControl1.RenderTransform>
                    </local:MyUserControl1>
                </GridViewItem>
                <GridViewItem Background="Blue">asdsadsada</GridViewItem>

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, December 09, 2014 5:57 AM
    Moderator
  • Hello again,

    I got it to work now!

    Thank you so much for the help James!

    -Vincent

    Wednesday, December 10, 2014 5:11 PM