Updated sample to use ColorPickerButton and only Segoe MDL2 icons

yoshiask · yoshiask · commit 5bb806eb925a · 2021-02-09T10:53:51.000-06:00
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind
@@ -24,14 +24,7 @@
                     <AppBarButton Icon="Paste" Label="Paste"/>
                     <AppBarSeparator />
                     <AppBarElementContainer>
-                        <SplitButton>
-                            <PathIcon Data="F1 M 14.785156 12.089844 C 15.305989 12.089844 15.748697 12.272136 16.113281 12.636719 C 16.477863 13.001303 16.660156 13.444011 16.660156 13.964844 L 16.660156 16.464844 C 16.660156 16.972656 16.477863 17.412109 16.113281 17.783203 C 15.748697 18.154297 15.305989 18.339844 14.785156 18.339844 L 4.375 18.339844 C 3.854167 18.339844 3.411458 18.154297 3.046875 17.783203 C 2.682292 17.412109 2.5 16.972656 2.5 16.464844 L 2.5 13.964844 C 2.5 13.444011 2.682292 13.001303 3.046875 12.636719 C 3.411458 12.272136 3.854167 12.089844 4.375 12.089844 Z M 14.785156 13.339844 L 4.375 13.339844 C 4.205729 13.339844 4.059245 13.398438 3.935547 13.515625 C 3.811849 13.632812 3.75 13.782553 3.75 13.964844 L 3.75 16.464844 C 3.75 16.634115 3.811849 16.7806 3.935547 16.904297 C 4.059245 17.027994 4.205729 17.089844 4.375 17.089844 L 14.785156 17.089844 C 14.967447 17.089844 15.117187 17.027994 15.234375 16.904297 C 15.351562 16.7806 15.410155 16.634115 15.410156 16.464844 L 15.410156 13.964844 C 15.410155 13.782553 15.351562 13.632812 15.234375 13.515625 C 15.117187 13.398438 14.967447 13.339844 14.785156 13.339844 Z M 5.878906 9.980469 L 9.003906 2.070312 C 9.108072 1.822918 9.290364 1.689453 9.550781 1.669922 C 9.811197 1.650391 10 1.751303 10.117188 1.972656 L 10.175781 2.070312 L 13.28125 9.980469 C 13.346354 10.136719 13.346354 10.296225 13.28125 10.458984 C 13.216145 10.621745 13.098957 10.729167 12.929688 10.78125 C 12.786457 10.846354 12.643229 10.852865 12.5 10.800781 C 12.356771 10.748698 12.246094 10.651042 12.167969 10.507812 L 12.128906 10.429688 L 11.289062 8.339844 L 7.871094 8.339844 L 7.03125 10.429688 C 6.979167 10.585938 6.884766 10.696615 6.748047 10.761719 C 6.611328 10.826823 6.464844 10.846354 6.308594 10.820312 L 6.230469 10.78125 C 6.087239 10.729167 5.979817 10.631511 5.908203 10.488281 C 5.836588 10.345053 5.820312 10.201823 5.859375 10.058594 L 5.878906 9.980469 Z M 9.589844 3.984375 L 8.359375 7.089844 L 10.800781 7.089844 Z " VerticalAlignment="Center" HorizontalAlignment="Center" />
-                            <SplitButton.Flyout>
-                                <Flyout>
-                                    <controls:ColorPicker Margin="-10" Color="{ThemeResource Brand-Color}"/>
-                                </Flyout>
-                            </SplitButton.Flyout>
-                        </SplitButton>
+                        <controls:ColorPickerButton SelectedColor="{ThemeResource Brand-Color}"/>
                     </AppBarElementContainer>
                     <AppBarElementContainer>
                         <ComboBox SelectedIndex="0" MinWidth="175">
@@ -56,12 +49,12 @@
                             <MenuFlyout Placement="BottomEdgeAlignedLeft">
                                 <MenuFlyoutItem Text="This Device">
                                     <MenuFlyoutItem.Icon>
-                                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEC4E;" />
+                                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xEC4E;" />
                                     </MenuFlyoutItem.Icon>
                                 </MenuFlyoutItem>
                                 <MenuFlyoutItem Text="Stock Images">
                                     <MenuFlyoutItem.Icon>
-                                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE721;" />
+                                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE721;" />
                                     </MenuFlyoutItem.Icon>
                                 </MenuFlyoutItem>
                                 <MenuFlyoutItem Icon="Globe" Text="Online Pictures" />
@@ -75,36 +68,67 @@
                     </AppBarButton>
                     <AppBarButton Label="Icons">
                         <AppBarButton.Icon>
-                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xED58;" />
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xED58;" />
                         </AppBarButton.Icon>
                     </AppBarButton>
                     <AppBarButton Label="3D Models">
                         <AppBarButton.Icon>
-                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF158;" />
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF158;" />
                         </AppBarButton.Icon>
                     </AppBarButton>
                     <AppBarSeparator/>
                     <AppBarButton Label="Add-ins">
                         <AppBarButton.Icon>
-                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xECAA;" />
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xECAA;" />
                         </AppBarButton.Icon>
                     </AppBarButton>
                     <controls:TabbedCommandBarItem.SecondaryCommands>
                         <AppBarButton Icon="Add" Label="New item" />
                     </controls:TabbedCommandBarItem.SecondaryCommands>
                 </controls:TabbedCommandBarItem>
-                <controls:TabbedCommandBarItem Header="Shape Format" IsContextual="True"
+                <controls:TabbedCommandBarItem Header="Picture Format" IsContextual="True"
                                                Visibility="{Binding ElementName=ContextualToggle, Path=IsOn}">
-                    <AppBarButton Label="Shape Fill">
+                    <AppBarButton Label="Remove Background">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE706;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarButton Label="Picture Effects">
                         <AppBarButton.Icon>
-                            <PathIcon Data="F1 M 7.5 1.464844 C 7.5 1.282553 7.561849 1.132812 7.685547 1.015625 C 7.809245 0.898438 7.955729 0.839844 8.125 0.839844 C 8.294271 0.839844 8.440755 0.898438 8.564453 1.015625 C 8.68815 1.132812 8.75 1.282553 8.75 1.464844 L 8.75 2.519531 C 8.932291 2.532553 9.114583 2.578125 9.296875 2.65625 C 9.479166 2.734375 9.641927 2.845053 9.785156 2.988281 L 12.734375 5.9375 C 13.059896 6.263021 13.222656 6.656901 13.222656 7.119141 C 13.222656 7.581381 13.059896 7.975261 12.734375 8.300781 L 9.199219 11.835938 C 8.873697 12.161459 8.479817 12.324219 8.017578 12.324219 C 7.555338 12.324219 7.161458 12.161459 6.835938 11.835938 L 3.886719 8.886719 C 3.561198 8.561198 3.398437 8.167318 3.398438 7.705078 C 3.398437 7.242839 3.561198 6.848959 3.886719 6.523438 L 7.421875 2.988281 C 7.434896 2.975261 7.447916 2.96224 7.460938 2.949219 C 7.473958 2.936199 7.486979 2.929688 7.5 2.929688 L 7.5 1.464844 Z M 7.5 5.214844 L 7.5 4.6875 L 5.097656 7.089844 L 11.972656 7.089844 C 11.959635 7.037761 11.943359 6.988933 11.923828 6.943359 C 11.904297 6.897787 11.875 6.855469 11.835938 6.816406 L 8.886719 3.886719 C 8.873697 3.860678 8.854166 3.841146 8.828125 3.828125 C 8.802083 3.815105 8.776041 3.802084 8.75 3.789062 L 8.75 5.214844 C 8.75 5.384115 8.68815 5.5306 8.564453 5.654297 C 8.440755 5.777995 8.294271 5.839844 8.125 5.839844 C 7.955729 5.839844 7.809245 5.777995 7.685547 5.654297 C 7.561849 5.5306 7.5 5.384115 7.5 5.214844 Z M 5.117188 8.339844 L 7.714844 10.957031 C 7.792969 11.035156 7.890625 11.074219 8.007812 11.074219 C 8.125 11.074219 8.222656 11.035156 8.300781 10.957031 L 10.917969 8.339844 Z M 5.488281 11.660156 L 3.75 11.660156 C 3.177083 11.660156 2.685547 11.865234 2.275391 12.275391 C 1.865234 12.685547 1.660156 13.177084 1.660156 13.75 L 1.660156 16.25 C 1.660156 16.822916 1.865234 17.314453 2.275391 17.724609 C 2.685547 18.134766 3.177083 18.339844 3.75 18.339844 L 16.25 18.339844 C 16.822916 18.339844 17.314453 18.134766 17.724609 17.724609 C 18.134766 17.314453 18.339844 16.822916 18.339844 16.25 L 18.339844 13.75 C 18.339844 13.242188 18.177082 12.799479 17.851562 12.421875 C 17.526041 12.044271 17.128906 11.803386 16.660156 11.699219 C 16.660156 11.751303 16.660156 11.800131 16.660156 11.845703 C 16.660156 11.891276 16.660156 11.933594 16.660156 11.972656 C 16.660156 12.141928 16.647135 12.307943 16.621094 12.470703 C 16.595051 12.633464 16.555988 12.792969 16.503906 12.949219 C 16.673176 13.014323 16.81315 13.11849 16.923828 13.261719 C 17.034504 13.404948 17.089844 13.567709 17.089844 13.75 L 17.089844 16.25 C 17.089844 16.484375 17.008463 16.682943 16.845703 16.845703 C 16.682941 17.008463 16.484375 17.089844 16.25 17.089844 L 3.75 17.089844 C 3.515625 17.089844 3.317057 17.008463 3.154297 16.845703 C 2.991536 16.682943 2.910156 16.484375 2.910156 16.25 L 2.910156 13.75 C 2.910156 13.515625 2.991536 13.317058 3.154297 13.154297 C 3.317057 12.991537 3.515625 12.910156 3.75 12.910156 L 6.953125 12.910156 C 6.822917 12.858073 6.699219 12.789714 6.582031 12.705078 C 6.464844 12.620443 6.354167 12.526042 6.25 12.421875 Z M 11.660156 11.972656 C 11.660156 11.777344 11.689453 11.578776 11.748047 11.376953 C 11.806641 11.175131 11.875 10.989584 11.953125 10.820312 C 12.031249 10.651042 12.11914 10.488281 12.216797 10.332031 C 12.314452 10.175781 12.415363 10.026042 12.519531 9.882812 C 12.610676 9.739584 12.705077 9.612631 12.802734 9.501953 C 12.90039 9.391276 12.98177 9.290365 13.046875 9.199219 C 13.085938 9.160156 13.13151 9.114584 13.183594 9.0625 C 13.235677 9.010417 13.274739 8.971354 13.300781 8.945312 L 13.300781 8.925781 C 13.430989 8.808594 13.580729 8.75 13.75 8.75 C 13.91927 8.75 14.06901 8.808594 14.199219 8.925781 L 14.453125 9.199219 C 14.518229 9.290365 14.599609 9.391276 14.697266 9.501953 C 14.794922 9.612631 14.889322 9.739584 14.980469 9.882812 C 15.084635 10.026042 15.185547 10.175781 15.283203 10.332031 C 15.380859 10.488281 15.46875 10.651042 15.546875 10.820312 C 15.625 10.989584 15.693359 11.175131 15.751953 11.376953 C 15.810547 11.578776 15.839844 11.777344 15.839844 11.972656 C 15.839844 12.558594 15.644531 13.069662 15.253906 13.505859 C 14.863281 13.942058 14.361979 14.160156 13.75 14.160156 C 13.13802 14.160156 12.636718 13.942058 12.246094 13.505859 C 11.855469 13.069662 11.660156 12.558594 11.660156 11.972656 Z M 13.964844 10.605469 C 13.925781 10.553386 13.889974 10.504558 13.857422 10.458984 C 13.824869 10.413412 13.789062 10.364584 13.75 10.3125 C 13.710938 10.364584 13.67513 10.413412 13.642578 10.458984 C 13.610025 10.504558 13.574218 10.553386 13.535156 10.605469 C 13.44401 10.722656 13.359375 10.846354 13.28125 10.976562 C 13.203125 11.106771 13.138021 11.230469 13.085938 11.347656 C 13.033854 11.477865 12.991535 11.595053 12.958984 11.699219 C 12.926432 11.803386 12.910156 11.894531 12.910156 11.972656 C 12.910156 12.259115 12.994791 12.486979 13.164062 12.65625 C 13.333332 12.825521 13.528645 12.910156 13.75 12.910156 C 13.971354 12.910156 14.166666 12.825521 14.335938 12.65625 C 14.505207 12.486979 14.589843 12.259115 14.589844 11.972656 C 14.589843 11.894531 14.573566 11.803386 14.541016 11.699219 C 14.508463 11.595053 14.466146 11.477865 14.414062 11.347656 C 14.361979 11.230469 14.296875 11.106771 14.21875 10.976562 C 14.140625 10.846354 14.055989 10.722656 13.964844 10.605469 Z " VerticalAlignment="Center" HorizontalAlignment="Center" />
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF158;" />
                         </AppBarButton.Icon>
                     </AppBarButton>
-                    <AppBarButton Label="Shape Outline">
+                    <AppBarButton Label="Rotate">
                         <AppBarButton.Icon>
-                            <PathIcon Data="F1 M 3.652344 11.660156 C 3.105469 11.686198 2.636719 11.901042 2.246094 12.304688 C 1.855469 12.708334 1.660156 13.190104 1.660156 13.75 L 1.660156 16.25 C 1.660156 16.822916 1.865234 17.314453 2.275391 17.724609 C 2.685547 18.134766 3.177083 18.339844 3.75 18.339844 L 16.25 18.339844 C 16.822916 18.339844 17.314453 18.134766 17.724609 17.724609 C 18.134766 17.314453 18.339844 16.822916 18.339844 16.25 L 18.339844 13.75 C 18.339844 13.177084 18.134766 12.685547 17.724609 12.275391 C 17.314453 11.865234 16.822916 11.660156 16.25 11.660156 L 11.289062 11.660156 L 10.195312 12.753906 C 10.169271 12.779948 10.139974 12.80599 10.107422 12.832031 C 10.074869 12.858073 10.045572 12.884115 10.019531 12.910156 L 16.25 12.910156 C 16.484375 12.910156 16.682941 12.991537 16.845703 13.154297 C 17.008463 13.317058 17.089844 13.515625 17.089844 13.75 L 17.089844 16.25 C 17.089844 16.484375 17.008463 16.682943 16.845703 16.845703 C 16.682941 17.008463 16.484375 17.089844 16.25 17.089844 L 3.75 17.089844 C 3.515625 17.089844 3.317057 17.008463 3.154297 16.845703 C 2.991536 16.682943 2.910156 16.484375 2.910156 16.25 L 2.910156 13.75 C 2.910156 13.59375 2.949219 13.450521 3.027344 13.320312 C 3.105469 13.190104 3.209635 13.092448 3.339844 13.027344 C 3.326823 12.923178 3.326823 12.819011 3.339844 12.714844 C 3.352865 12.610678 3.378906 12.506511 3.417969 12.402344 L 3.652344 11.660156 Z M 15.546875 2.460938 C 16.067707 2.981771 16.328125 3.613281 16.328125 4.355469 C 16.328125 5.097656 16.067707 5.729167 15.546875 6.25 L 9.609375 12.167969 C 9.492188 12.285156 9.368489 12.382812 9.238281 12.460938 C 9.108072 12.539062 8.964844 12.597656 8.808594 12.636719 L 5.234375 13.710938 C 5.013021 13.776042 4.801432 13.756511 4.599609 13.652344 C 4.397786 13.548178 4.264323 13.385417 4.199219 13.164062 C 4.173177 13.072917 4.160156 12.985026 4.160156 12.900391 C 4.160156 12.815756 4.173177 12.734375 4.199219 12.65625 L 5.332031 9.140625 C 5.384114 8.997396 5.449219 8.860678 5.527344 8.730469 C 5.605469 8.600261 5.696614 8.483073 5.800781 8.378906 L 11.738281 2.460938 C 12.272135 1.927084 12.9069 1.660156 13.642578 1.660156 C 14.378255 1.660156 15.013021 1.927084 15.546875 2.460938 Z M 12.636719 3.339844 L 6.679688 9.277344 C 6.653646 9.303386 6.627604 9.339193 6.601562 9.384766 C 6.575521 9.430339 6.549479 9.472656 6.523438 9.511719 L 5.644531 12.285156 L 8.457031 11.445312 C 8.509114 11.432292 8.557942 11.412761 8.603516 11.386719 C 8.649088 11.360678 8.684896 11.328125 8.710938 11.289062 L 14.648438 5.371094 C 14.934896 5.084636 15.078125 4.742839 15.078125 4.345703 C 15.078125 3.948568 14.934896 3.613282 14.648438 3.339844 C 14.374999 3.053386 14.039713 2.910156 13.642578 2.910156 C 13.245442 2.910156 12.910156 3.053386 12.636719 3.339844 Z " VerticalAlignment="Center" HorizontalAlignment="Center" />
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7AD;" />
                         </AppBarButton.Icon>
                     </AppBarButton>
+                    <AppBarElementContainer>
+                        <SplitButton>
+                            <StackPanel Spacing="12" Orientation="Horizontal">
+                                <FontIcon FontSize="16" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7A8;" />
+                                <TextBlock FontSize="12" Text="Crop"/>
+                            </StackPanel>
+                            <SplitButton.Flyout>
+                                <MenuFlyout>
+                                    <MenuFlyoutItem Text="Crop">
+                                        <MenuFlyoutItem.Icon>
+                                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7A8;" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Text="Crop to Shape">
+                                        <MenuFlyoutItem.Icon>
+                                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF407;" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Text="Aspect Ratio" />
+                                    <MenuFlyoutSeparator/>
+                                    <MenuFlyoutItem Text="Fill" />
+                                    <MenuFlyoutItem Text="Fit" />
+                                </MenuFlyout>
+                            </SplitButton.Flyout>
+                        </SplitButton>
+                    </AppBarElementContainer>
                 </controls:TabbedCommandBarItem>
             </controls:TabbedCommandBar.MenuItems>
         </controls:TabbedCommandBar>
