Building a Profile Page with Uno Platform for Figma

<utu:AutoLayout Background="{ThemeResource BackgroundBrush}">
  <utu:AutoLayout.Resources>
    <x:String x:Key="Icon_Account_Box">F1 M 0 2 L 0 16 C 0 17.100000023841858 0.8899999856948853 18 2 18 L 16 18 C 17.100000023841858 18 18 17.100000023841858 18 16 L 18 2 C 18 0.8999999761581421 17.100000023841858 0 16 0 L 2 0 C 0.8899999856948853 0 0 0.8999999761581421 0 2 Z M 12 6 C 12 7.659999966621399 10.659999966621399 9 9 9 C 7.340000033378601 9 6 7.659999966621399 6 6 C 6 4.340000033378601 7.340000033378601 3 9 3 C 10.659999966621399 3 12 4.340000033378601 12 6 Z M 3 14 C 3 12 7 10.899999618530273 9 10.899999618530273 C 11 10.899999618530273 15 12 15 14 L 15 15 L 3 15 L 3 14 Z</x:String>
    <x:String x:Key="Icon_Email">F1 M 18 0 L 2 0 C 0.8999999761581421 0 0.009999990463256836 0.8999999761581421 0.009999990463256836 2 L 0 14 C 0 15.100000023841858 0.8999999761581421 16 2 16 L 18 16 C 19.100000023841858 16 20 15.100000023841858 20 14 L 20 2 C 20 0.8999999761581421 19.100000023841858 0 18 0 Z M 18 4 L 10 9 L 2 4 L 2 2 L 10 7 L 18 2 L 18 4 Z</x:String>
    <x:String x:Key="Icon_Keyboard_Arrow_Right">F1 M 0 10.59000015258789 L 4.579999923706055 6 L 0 1.4099998474121094 L 1.4099998474121094 0 L 7.409999847412109 6 L 1.4099998474121094 12 L 0 10.59000015258789 Z</x:String>
    <x:String x:Key="Icon_Logout">F1 M 15 4 L 13.59000015258789 5.409999847412109 L 16.170000076293945 8 L 6 8 L 6 10 L 16.170000076293945 10 L 13.59000015258789 12.579999923706055 L 15 14 L 20 9 L 15 4 Z M 2 2 L 10 2 L 10 0 L 2 0 C 0.8999999761581421 0 0 0.8999999761581421 0 2 L 0 16 C 0 17.100000023841858 0.8999999761581421 18 2 18 L 10 18 L 10 16 L 2 16 L 2 2 Z</x:String>
    <x:String x:Key="Icon_Message">F1 M 18 0 L 2 0 C 0.8999999761581421 0 0.009999990463256836 0.8999999761581421 0.009999990463256836 2 L 0 20 L 4 16 L 18 16 C 19.100000023841858 16 20 15.100000023841858 20 14 L 20 2 C 20 0.8999999761581421 19.100000023841858 0 18 0 Z M 16 12 L 4 12 L 4 10 L 16 10 L 16 12 Z M 16 9 L 4 9 L 4 7 L 16 7 L 16 9 Z M 16 6 L 4 6 L 4 4 L 16 4 L 16 6 Z</x:String>
    <x:String x:Key="Icon_Phone">F1 M 3.619999885559082 7.789999961853027 C 5.059999942779541 10.619999885559082 7.380000114440918 12.929999113082886 10.210000038146973 14.379999160766602 L 12.40999984741211 12.180000305175781 C 12.679999858140945 11.910000294446945 13.080000311136246 11.81999958306551 13.430000305175781 11.9399995803833 C 14.550000309944153 12.309999585151672 15.759999990463257 12.510000228881836 17 12.510000228881836 C 17.55000001192093 12.510000228881836 18 12.960000216960907 18 13.510000228881836 L 18 17 C 18 17.55000001192093 17.55000001192093 18 17 18 C 7.609999656677246 18 0 10.390000343322754 0 1 C 0 0.44999998807907104 0.44999998807907104 0 1 0 L 4.5 0 C 5.050000011920929 0 5.5 0.44999998807907104 5.5 1 C 5.5 2.25 5.699999690055847 3.4500001668930054 6.069999694824219 4.570000171661377 C 6.179999694228172 4.9200001657009125 6.099999696016312 5.310000151395798 5.819999694824219 5.590000152587891 L 3.619999885559082 7.789999961853027 Z</x:String>
    <x:String x:Key="Icon_Phone_Callback">F1 M 3.619999885559082 7.800000190734863 C 5.059999942779541 10.630000114440918 7.380000114440918 12.939999341964722 10.210000038146973 14.389999389648438 L 12.40999984741211 12.190000534057617 C 12.679999858140945 11.920000523328781 13.080000311136246 11.829999811947346 13.430000305175781 11.949999809265137 C 14.550000309944153 12.319999814033508 15.759999990463257 12.520000457763672 17 12.520000457763672 C 17.55000001192093 12.520000457763672 18 12.970000445842743 18 13.520000457763672 L 18 17.010000228881836 C 18 17.560000240802765 17.55000001192093 18.010000228881836 17 18.010000228881836 C 7.609999656677246 18.010000228881836 0 10.40000033378601 0 1.0099999904632568 C 0 0.4599999785423279 0.44999998807907104 0.009999990463256836 1 0.009999990463256836 L 4.5 0.009999990463256836 C 5.050000011920929 0.009999990463256836 5.5 0.4599999785423279 5.5 1.0099999904632568 C 5.5 2.259999990463257 5.699999690055847 3.459999918937683 6.069999694824219 4.579999923706055 C 6.179999694228172 4.92999991774559 6.099999696016312 5.320000380277634 5.819999694824219 5.600000381469727 L 3.619999885559082 7.800000190734863 Z M 17.15999984741211 0.7000000476837158 L 16.450000762939453 0 L 10 6.300000190734863 L 10 2.009999990463257 L 9 2.009999990463257 L 9 8.010000228881836 L 15 8.010000228881836 L 15 7.010000228881836 L 10.850000381469727 7.010000228881836 L 17.15999984741211 0.7000000476837158 Z</x:String>
    <x:String x:Key="Icon_Phone_Missed">F1 M 6.5 2.5 L 12 8 L 19 1 L 18 0 L 12 6 L 7.5 1.5 L 11 1.5 L 11 0 L 5 0 L 5 6 L 6.5 6 L 6.5 2.5 Z M 23.709999084472656 13.670000076293945 C 20.659999132156372 10.77999997138977 16.539999961853027 9 12 9 C 7.460000038146973 9 3.339999943971634 10.77999997138977 0.28999999165534973 13.670000076293945 C 0.10999998450279236 13.850000083446503 0 14.099999159574509 0 14.379999160766602 C 0 14.659999161958694 0.10999998450279236 14.910000145435333 0.28999999165534973 15.09000015258789 L 2.7699999809265137 17.56999969482422 C 2.949999988079071 17.749999701976776 3.2000000178813934 17.860000610351562 3.4800000190734863 17.860000610351562 C 3.7500000298023224 17.860000610351562 3.9999998211860657 17.749999925494194 4.179999828338623 17.579999923706055 C 4.969999849796295 16.83999991416931 5.870000123977661 16.21999955177307 6.840000152587891 15.729999542236328 C 7.1700001657009125 15.569999545812607 7.400000095367432 15.22999992966652 7.400000095367432 14.829999923706055 L 7.400000095367432 11.729999542236328 C 8.850000143051147 11.249999552965164 10.399999976158142 11 12 11 C 13.600000023841858 11 15.15000033378601 11.250000268220901 16.600000381469727 11.720000267028809 L 16.600000381469727 14.819999694824219 C 16.600000381469727 15.209999680519104 16.829999834299088 15.55999931693077 17.15999984741211 15.719999313354492 C 18.139999866485596 16.209999322891235 19.029999911785126 16.839999675750732 19.829999923706055 17.56999969482422 C 20.009999930858612 17.749999701976776 20.26000067591667 17.850000381469727 20.530000686645508 17.850000381469727 C 20.8100006878376 17.850000381469727 21.059999763965607 17.73999947309494 21.239999771118164 17.559999465942383 L 23.719999313354492 15.079999923706055 C 23.89999932050705 14.899999916553497 24.010000228881836 14.650000840425491 24.010000228881836 14.370000839233398 C 24.010000228881836 14.090000838041306 23.889999091625214 13.850000083446503 23.709999084472656 13.670000076293945 L 23.709999084472656 13.670000076293945 Z</x:String>
    <x:String x:Key="Icon_Settings">F1 M 16.47800064086914 10.539999008178711 C 16.51800063997507 10.239998996257782 16.538002014160156 9.930000394582748 16.538002014160156 9.600000381469727 C 16.538002014160156 9.280000388622284 16.518000412732363 8.959999859333038 16.468000411987305 8.65999984741211 L 18.498001098632812 7.0799994468688965 C 18.67800110578537 6.93999944627285 18.728001937270164 6.669999793171883 18.61800193786621 6.46999979019165 L 16.698001861572266 3.1500000953674316 C 16.578001864254475 2.9300000965595245 16.328001707792282 2.8599998280406 16.108001708984375 2.929999828338623 L 13.717999458312988 3.8899998664855957 C 13.217999458312988 3.5099998712539673 12.688000500202179 3.1899998039007187 12.098000526428223 2.9499998092651367 L 11.73799991607666 0.4099998474121094 C 11.69799991697073 0.1699998527765274 11.498000368475914 0 11.258000373840332 0 L 7.418000221252441 0 C 7.178000226616859 0 6.987999953329563 0.1699998527765274 6.947999954223633 0.4099998474121094 L 6.588000297546387 2.9499998092651367 C 5.99800032377243 3.1899998039007187 5.458000421524048 3.519999861717224 4.968000411987305 3.8899998664855957 L 2.578000068664551 2.929999828338623 C 2.3580000698566437 2.8499998301267624 2.1080003902316093 2.9300000965595245 1.9880003929138184 3.1500000953674316 L 0.07800034433603287 6.46999979019165 C -0.04199965298175812 6.6799997836351395 -0.001999765634536743 6.93999944627285 0.1980002373456955 7.0799994468688965 L 2.2280001640319824 8.65999984741211 C 2.1780001632869244 8.959999859333038 2.13800048828125 9.29000037908554 2.13800048828125 9.600000381469727 C 2.13800048828125 9.910000383853912 2.1580001823604107 10.239998996257782 2.2080001831054688 10.539999008178711 L 0.17800025641918182 12.120000839233398 C -0.0019997507333755493 12.260000839829445 -0.05199963599443436 12.529999539256096 0.058000363409519196 12.729999542236328 L 1.9780001640319824 16.05000114440918 C 2.0980001613497734 16.270001143217087 2.348000317811966 16.340000458061695 2.568000316619873 16.270000457763672 L 4.958000183105469 15.309999465942383 C 5.458000183105469 15.689999461174011 5.9880000948905945 16.010000005364418 6.578000068664551 16.25 L 6.938000679016113 18.790000915527344 C 6.988000679761171 19.030000910162926 7.178000226616859 19.200000762939453 7.418000221252441 19.200000762939453 L 11.258000373840332 19.200000762939453 C 11.498000368475914 19.200000762939453 11.698000641539693 19.030000910162926 11.72800064086914 18.790000915527344 L 12.088000297546387 16.25 C 12.678000271320343 16.010000005364418 13.218001127243042 15.689999461174011 13.708001136779785 15.309999465942383 L 16.09800148010254 16.270000457763672 C 16.318001478910446 16.350000455975533 16.56800163537264 16.270001143217087 16.68800163269043 16.05000114440918 L 18.608001708984375 12.729999542236328 C 18.728001706302166 12.509999543428421 18.67800086736679 12.260000839829445 18.488000869750977 12.120000839233398 L 16.47800064086914 10.539999008178711 Z M 9.338000297546387 13.200000762939453 C 7.3580002784729 13.200000762939453 5.73799991607666 11.580000400543213 5.73799991607666 9.600000381469727 C 5.73799991607666 7.62000036239624 7.3580002784729 5.999999523162842 9.338000297546387 5.999999523162842 C 11.318000316619873 5.999999523162842 12.938000679016113 7.62000036239624 12.938000679016113 9.600000381469727 C 12.938000679016113 11.580000400543213 11.318000316619873 13.200000762939453 9.338000297546387 13.200000762939453 Z</x:String>
    <x:String x:Key="Icon_Videocam">F1 M 14 4.5 L 14 1 C 14 0.44999998807907104 13.550000011920929 0 13 0 L 1 0 C 0.44999998807907104 0 0 0.44999998807907104 0 1 L 0 11 C 0 11.550000011920929 0.44999998807907104 12 1 12 L 13 12 C 13.550000011920929 12 14 11.550000011920929 14 11 L 14 7.5 L 18 11.5 L 18 0.5 L 14 4.5 Z</x:String>
  </utu:AutoLayout.Resources>
  <ScrollViewer Padding="8" utu:AutoLayout.PrimaryAlignment="Stretch">
    <utu:AutoLayout Spacing="12" Padding="8">
      <utu:AutoLayout Padding="30,110,30,0" PrimaryAxisAlignment="End" Height="300">
        <Border utu:AutoLayout.CounterAlignment="Center" Width="100" Height="100" CornerRadius="100">
          <Image Source="{Binding image}" Stretch="UniformToFill" />
        </Border>
        <utu:AutoLayout Padding="0,10,0,0" utu:AutoLayout.CounterAlignment="Center">
          <TextBlock TextAlignment="Center" Text="Darth Vader" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource HeadlineSmall}" />
          <TextBlock TextAlignment="Center" Text="+0123456789" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
          <TextBlock TextAlignment="Center" Text="[email protected]" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource LabelLarge}" />
        </utu:AutoLayout>
      </utu:AutoLayout>
      <utu:AutoLayout Spacing="30" PrimaryAxisAlignment="Center" Orientation="Horizontal" Height="55">
        <Button Background="{ThemeResource PrimaryInverseBrush}" utu:AutoLayout.CounterAlignment="Center" CornerRadius="30" Foreground="{ThemeResource OnPrimaryBrush}" Style="{StaticResource IconButtonStyle}">
          <PathIcon Data="{StaticResource Icon_Phone}" Foreground="{ThemeResource OnPrimaryBrush}" />
        </Button>
        <Button Background="{ThemeResource OnPrimaryBrush}" utu:AutoLayout.CounterAlignment="Center" CornerRadius="30" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
          <PathIcon Data="{StaticResource Icon_Videocam}" Foreground="{ThemeResource PrimaryBrush}" />
        </Button>
        <Button Background="{ThemeResource OnPrimaryBrush}" utu:AutoLayout.CounterAlignment="Center" CornerRadius="30" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
          <PathIcon Data="{StaticResource Icon_Message}" Foreground="{ThemeResource PrimaryBrush}" />
        </Button>
        <Button Background="{ThemeResource OnPrimaryBrush}" utu:AutoLayout.CounterAlignment="Center" CornerRadius="30" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
          <PathIcon Data="{StaticResource Icon_Email}" Foreground="{ThemeResource PrimaryBrush}" />
        </Button>
      </utu:AutoLayout>
      <TextBlock Text="Today" Margin="15,0" utu:AutoLayout.CounterAlignment="Start" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
      <utu:AutoLayout Spacing="20" Padding="0,0,0,20" PrimaryAxisAlignment="Center" Orientation="Horizontal">
        <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" Padding="15,10" CornerRadius="35" PrimaryAxisAlignment="Center" utu:AutoLayout.CounterAlignment="Start" Width="175" Height="175">
          <utu:AutoLayout Spacing="8" utu:AutoLayout.CounterAlignment="Center">
            <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource ErrorBrush}" Style="{StaticResource IconButtonStyle}">
              <PathIcon Data="{StaticResource Icon_Phone_Missed}" Foreground="{ThemeResource ErrorBrush}" />
            </Button>
            <utu:AutoLayout Spacing="8" utu:AutoLayout.CounterAlignment="Center">
              <TextBlock Text="Missed Call" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource ErrorBrush}" Style="{StaticResource TitleMedium}" />
              <TextBlock Text="09:23 pm" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
              <TextBlock Text="4" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
            </utu:AutoLayout>
          </utu:AutoLayout>
        </utu:AutoLayout>
        <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" Padding="15,10" CornerRadius="35" PrimaryAxisAlignment="Center" utu:AutoLayout.CounterAlignment="Start" Width="175" Height="175">
          <utu:AutoLayout Spacing="8" utu:AutoLayout.CounterAlignment="Center">
            <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
              <PathIcon Data="{StaticResource Icon_Phone_Callback}" Foreground="{ThemeResource PrimaryBrush}" />
            </Button>
            <utu:AutoLayout Spacing="8" utu:AutoLayout.CounterAlignment="Center">
              <TextBlock Text="Incoming Call" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource TitleMedium}" />
              <TextBlock Text="09:05 pm" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
              <TextBlock Text="1" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
            </utu:AutoLayout>
          </utu:AutoLayout>
        </utu:AutoLayout>
      </utu:AutoLayout>
      <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" Spacing="14" Padding="20" CornerRadius="35">
        <utu:AutoLayout Spacing="150" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" Width="308">
          <utu:AutoLayout Spacing="5" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Center">
            <Button Background="{ThemeResource BackgroundBrush}" utu:AutoLayout.CounterAlignment="Start" CornerRadius="10" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
              <PathIcon Data="{StaticResource Icon_Settings}" Foreground="{ThemeResource PrimaryBrush}" />
            </Button>
            <TextBlock TextAlignment="Center" Text="Settings" utu:AutoLayout.CounterAlignment="Start" Width="82" Height="40" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource TitleMedium}" />
          </utu:AutoLayout>
          <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
            <PathIcon Data="{StaticResource Icon_Keyboard_Arrow_Right}" Foreground="{ThemeResource PrimaryBrush}" />
          </Button>
        </utu:AutoLayout>
        <utu:AutoLayout Spacing="142" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" Width="308">
          <utu:AutoLayout Spacing="5" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Center">
            <Button Background="{ThemeResource BackgroundBrush}" utu:AutoLayout.CounterAlignment="Start" CornerRadius="10" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
              <PathIcon Data="{StaticResource Icon_Account_Box}" Foreground="{ThemeResource PrimaryBrush}" />
            </Button>
            <TextBlock TextAlignment="Center" Text="Account" utu:AutoLayout.CounterAlignment="Start" Width="91" Height="40" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource TitleMedium}" />
          </utu:AutoLayout>
          <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
            <PathIcon Data="{StaticResource Icon_Keyboard_Arrow_Right}" Foreground="{ThemeResource PrimaryBrush}" />
          </Button>
        </utu:AutoLayout>
        <utu:AutoLayout Spacing="150" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" Width="308">
          <utu:AutoLayout Spacing="5" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Center">
            <Button Background="{ThemeResource BackgroundBrush}" utu:AutoLayout.CounterAlignment="Start" CornerRadius="10" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
              <PathIcon Data="{StaticResource Icon_Logout}" Foreground="{ThemeResource PrimaryBrush}" />
            </Button>
            <TextBlock TextAlignment="Center" Text="Log out" utu:AutoLayout.CounterAlignment="Start" Width="82" Height="40" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource TitleMedium}" />
          </utu:AutoLayout>
          <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
            <PathIcon Data="{StaticResource Icon_Keyboard_Arrow_Right}" Foreground="{ThemeResource PrimaryBrush}" />
          </Button>
        </utu:AutoLayout>
      </utu:AutoLayout>
    </utu:AutoLayout>
  </ScrollViewer>
</utu:AutoLayout>