UWP：集合添加颜色、弹窗显示及选中颜色展示问题解决

我来帮你搞定这两个问题——Popup弹不出来和选中颜色的展示功能。咱们一步步来修复：

问题1：Popup无法正常显示的原因及修复 #

你的代码里有几个关键问题导致Popup不显示：

1. MyColors依赖属性未初始化：构造函数里创建了_myColors集合，但没有把它赋值给MyColors依赖属性，导致XAML里的ItemsSource="{TemplateBinding MyColors}"绑定不到数据。
2. Popup没有设置PlacementTarget：Popup需要知道相对于哪个控件弹出，否则可能出现在屏幕外区域。

修复Picker.cs的构造函数和Popup设置 #

修改Picker类的构造函数，把初始化的集合赋值给依赖属性，同时优化Popup的弹出逻辑：

public sealed class Picker : ItemsControl, INotifyPropertyChanged
{
    private ObservableCollection<SolidColorBrush> _myColors;
    private Popup _popup;

    public Picker()
    {
        this.DefaultStyleKey = typeof(Picker);
        _myColors = new ObservableCollection<SolidColorBrush>()
        {
            new SolidColorBrush(Color.FromArgb(255,225,225,25)),
            new SolidColorBrush(Color.FromArgb(255,225,25,25)),
            new SolidColorBrush(Color.FromArgb(255,225,225,225)),
            new SolidColorBrush(Color.FromArgb(255,25,225,25))
        };
        // 将集合赋值给依赖属性，让XAML能绑定到数据
        MyColors = _myColors;
        // 默认选中第一个颜色
        SelectedColor = _myColors.FirstOrDefault();
    }

    // 新增：选中颜色的依赖属性，用于绑定展示
    public SolidColorBrush SelectedColor
    {
        get { return (SolidColorBrush)GetValue(SelectedColorProperty); }
        set { SetValue(SelectedColorProperty, value); }
    }

    public static readonly DependencyProperty SelectedColorProperty =
        DependencyProperty.Register("SelectedColor", typeof(SolidColorBrush), typeof(Picker), new PropertyMetadata(null));

    public ObservableCollection<SolidColorBrush> MyColors
    {
        get { return (ObservableCollection<SolidColorBrush>)GetValue(MyColorsProperty); }
        set { SetValue(MyColorsProperty, value); }
    }

    public static readonly DependencyProperty MyColorsProperty =
        DependencyProperty.Register("MyColors", typeof(ObservableCollection<SolidColorBrush>), typeof(Picker), new PropertyMetadata(null));

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _popup = GetTemplateChild("myPopup") as Popup;
        var popupButton = GetTemplateChild("btn1") as Button;
        
        if (popupButton != null)
        {
            popupButton.Click += Popupbutton_Click;
            // 设置Popup的弹出目标为按钮，确保弹窗在按钮附近显示
            _popup.PlacementTarget = popupButton;
            _popup.Placement = PlacementMode.Bottom;
        }
    }

    private void Popupbutton_Click(object sender, RoutedEventArgs e)
    {
        _popup.IsOpen = !_popup.IsOpen;
    }

    // 新增：颜色项点击事件处理，用于更新选中颜色并关闭弹窗
    public void OnColorItemClick(object sender, RoutedEventArgs e)
    {
        if (sender is Border border && border.Background is SolidColorBrush brush)
        {
            SelectedColor = brush;
            _popup.IsOpen = false;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(string propname)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propname));
    }
}

问题2：选中颜色在Border展示的实现 #

接下来修改Generic.xaml，完成两个核心功能：

1. 把顶部Border的Background绑定到SelectedColor依赖属性，展示选中的颜色。
2. 给每个颜色项的Border添加点击事件，触发颜色选中逻辑。
3. 优化Popup布局，让颜色项横向排列更直观。

<Style TargetType="local:Picker" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:Picker">
                <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <!-- 展示选中颜色的Border -->
                        <Border Height="50" 
                                BorderBrush="Blue" 
                                BorderThickness="5"
                                Background="{TemplateBinding SelectedColor}">
                        </Border>
                        <!-- 弹出按钮 -->
                        <Button Grid.Column="1" 
                                Name="btn1" 
                                Height="55" 
                                Content="选择颜色"
                                Margin="10,0"/>
                        <!-- Popup弹窗 -->
                        <Popup Name="myPopup" 
                               IsOpen="False" 
                               IsLightDismissEnabled="True"
                               Width="650"
                               Height="100">
                            <Grid Background="White"
                                  BorderBrush="Gray"
                                  BorderThickness="1">
                                <ItemsControl ItemsSource="{TemplateBinding MyColors}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <!-- 让颜色项横向排列 -->
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Border BorderThickness="2" 
                                                    BorderBrush="Black"
                                                    Width="80"
                                                    Height="80"
                                                    Margin="5"
                                                    Cursor="Hand"
                                                    Background="{Binding}"
                                                    Click="OnColorItemClick">
                                            </Border>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </Grid>
                        </Popup>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键修复点总结 #

• Popup显示问题：给MyColors依赖属性赋值，设置Popup的PlacementTarget和Placement，确保弹窗出现在按钮下方可见区域。
• 选中颜色展示：新增SelectedColor依赖属性，绑定到顶部Border的Background，给颜色项添加点击事件更新选中值并自动关闭弹窗。
• 布局优化：调整Grid列宽适配按钮，修改ItemsPanel让颜色横向排列，提升交互体验。

现在你的Picker控件应该可以正常弹出颜色选择面板，点击颜色后顶部Border会实时展示选中的颜色啦！

内容的提问来源于stack exchange，提问作者Raj