Win8.1 App 在xaml中实现颜色选择器的功能

做一个更换背景颜色的功能, 但是感觉xaml工具箱里面控件种类不如MFC里面的多, 借鉴别人的博客, 实现了颜色选择器的功能

本来计划做win8 app 但是还是做成了win8.1 的,  因为win8不支持flyout

步骤1 在appbar上面添加一个按钮,  按钮内设置flyou控件 

在内添加combobox控件  combobox添加响应函数 background_color_combo_SelectionChanged , 并且绑定数据

    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" 
                Opened="BottomAppBar_Opened" Closed="BottomAppBar_Closed" IsTapEnabled="False"
                IsDoubleTapEnabled="False" IsHoldingEnabled="False" 
                IsRightTapEnabled="False" IsTabStop="False" IsSticky="False"  BorderBrush="#00348DFD">
            <AppBar.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Offset="0" Color="Transparent"/>
                    <GradientStop Color="#FF348DFD" Offset="1"/>
                    <GradientStop Color="#FF348DFD" Offset="0.068"/>
                </LinearGradientBrush>
            </AppBar.Background>
            <Grid>
                     <Button HorizontalAlignment="Right" Name="backgroundbtn"
                            Style="{StaticResource FontColorAppBarButtonStyle}">
                        <Button.Flyout>
                            <Flyout>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>

                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0">

                                        <TextBlock  HorizontalAlignment="Left" TextWrapping="NoWrap"
                                            Text="背景颜色" VerticalAlignment="Center"  FontSize="15"/>
                                        <ComboBox x:Name="background_color_combo"  Width="200" Height="30" 
                                          ItemsSource="{Binding Colors}"
                                          SelectedItem="{Binding SelectedColorName, Mode=TwoWay}" 
                                          SelectionChanged="background_color_combo_SelectionChanged"
                                          Padding="8,0" Margin="10">
                                            <ComboBox.ItemTemplate>
                                                <DataTemplate>
                                                    <Grid>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="Auto"/>
                                                            <ColumnDefinition Width="*"/>
                                                        </Grid.ColumnDefinitions>
                                                        <Rectangle Width="20" Height="20" Fill="{Binding Name}" Margin="5,0"/>
                                                        <TextBlock Name="ColorNam"  Grid.Column="1" Margin="10,0,0,0" Text="{Binding Name}" Foreground="Black"/>
                                                    </Grid>
                                                </DataTemplate>
                                            </ComboBox.ItemTemplate>
                                        </ComboBox>
                                    </StackPanel>
                                </Grid>
                            </Flyout>
                        </Button.Flyout>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

步骤2 在loadstate中对combo控件进行初始化

            ///设置颜色选择器
            var colors = typeof(Colors).GetTypeInfo().DeclaredProperties;
            foreach (var item in colors)
            {
                background_color_combo.Items.Add(item);
                if (((Color)item.GetValue(null)).ToString() == 
                    ((SolidColorBrush)grid.Background).Color.ToString())
                {
                    background_color_combo.SelectedItem = item;
                }
            }

步骤 3 完成响应函数

        private void background_color_combo_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var combo = (ComboBox)sender;
            if (combo.SelectedIndex != -1)
            {
                var pi = combo.SelectedItem as PropertyInfo;
                var col = new SolidColorBrush((Color)pi.GetValue(null));
                combo.BorderBrush = col;
                grid.Background = col;
            }

        }

步骤4 保存到本地数据中

 Windows.Storage.ApplicationDataContainer localSettings
               = Windows.Storage.ApplicationData.Current.LocalSettings;

            //背景颜色
            var c = ((SolidColorBrush)grid.Background).Color;
            var backgroundColor = new Windows.Storage.ApplicationDataCompositeValue();
            backgroundColor["r"] = c.R;
            backgroundColor["g"] = c.G;
            backgroundColor["b"] = c.B;
            localSettings.Values["BackgroundColor"] = backgroundColor;

步骤5  在loadstate中载入保存的背景颜色

            //加载 背景颜色 和 透明度
            Windows.Storage.ApplicationDataCompositeValue backgroundColor =
            (Windows.Storage.ApplicationDataCompositeValue)localSettings.Values["BackgroundColor"];
            if (backgroundColor == null)
            {
                //载入默认值
                backgroundColor = new Windows.Storage.ApplicationDataCompositeValue();
                backgroundColor["r"] = (Byte)255;
                backgroundColor["g"] = (Byte)255;
                backgroundColor["b"] = (Byte)255;
                localSettings.Values["BackgroundColor"] = backgroundColor;
            }
            Byte R = (Byte)backgroundColor["r"];
            Byte G = (Byte)backgroundColor["g"];
            Byte B = (Byte)backgroundColor["b"];
            grid.Background = new SolidColorBrush(Color.FromArgb(255, (Byte)R, (Byte)G, (Byte)B));

大功告成 ~