自定义 silverlight 组合框组件答案

【问题标题】：Customize silverlight combobox component自定义 silverlight 组合框组件
【发布时间】：2012-03-22 09:17:34
【问题描述】：

这是（应该）一个简单的问题。我想创建一个类似于 Facebook 通知按钮的组件（因此，如果您单击它，则会出现一个下拉菜单，并且会出现带有未读通知数量的“徽章”）。

我想自定义默认组合框组件（它有弹出窗口和切换按钮），通过删除切换按钮内的文本字段和箭头，并在画布内添加切换按钮，这样我就可以绝对定位徽章。

所以.. 我想“导出”一些基本行为，以及进一步设计组件的可能性（例如为切换按钮、徽章和列表中的每个项目设置模板）。

我找不到如何实现这一点.. 制作“第一”级样式，以便使用我的组件的人不知道它是一个组合框，但他们可以设置我的属性（如“ ButtonContent”、“NotificationItem”和“Badge”）……

谢谢。弗朗切斯科

【问题讨论】：

标签： silverlight xaml

【解决方案1】：

如果您不介意为第 3 方组件付费，则始终有RadControls for Silverlight from Telerik。该套件包含RadDropDownButton control，我认为它应该完全满足您的需求。

【讨论】：

【解决方案2】：

我决定不给组合框设置样式，而是创建一个新组件（受到组合框的强烈启发）

<UserControl x:Class="silverlight.Components.Notification.View.NotificationSummary"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:conv="clr-namespace:silverlight.ViewModel.Converters"
    mc:Ignorable="d"
    d:DesignHeight="25" d:DesignWidth="100">

    <StackPanel x:Name="LayoutRoot">
        <StackPanel.Resources>
            <conv:NumberToVisibilityConverter x:Key="HasUnreadEventsConverter" />
        </StackPanel.Resources>

        <ToggleButton x:Name="eventButton" Click="notificationButtonClicked">
            <ToggleButton.Content>
                <StackPanel Orientation="Horizontal">
                    <Border Padding="5 3" VerticalAlignment="Center" HorizontalAlignment="Left">
                        <ContentPresenter x:Name="buttonContent" />
                    </Border>
                    <Border x:Name="badge" Padding="5 2" CornerRadius="5" Margin="0 0 5 0"
                                HorizontalAlignment="Right" VerticalAlignment="Center"
                                BorderThickness="1"
                            Visibility="{Binding numberOfUnreadEvents, Converter={StaticResource HasUnreadEventsConverter}}">
                        <Border.BorderBrush>
                            <SolidColorBrush Color="Black" />
                        </Border.BorderBrush>
                        <Border.Background>
                            <SolidColorBrush Color="Red"/>
                        </Border.Background>
                        <TextBlock x:Name="badgeText" Text="{Binding numberOfUnreadEvents}"/>
                    </Border>
                </StackPanel>
            </ToggleButton.Content>
        </ToggleButton>

        <Popup IsOpen="{Binding ElementName=eventButton, Path=IsChecked}" x:Name="notificationPopup">
            <Border x:Name="popupBorder" Background="White" CornerRadius="0 0 5 5"
                    Padding="5">
                <Border.Effect>
                    <DropShadowEffect BlurRadius="5" Direction="315" ShadowDepth="5" Color="Black" />
                </Border.Effect>
                <ListBox x:Name="eventsList" ItemsSource="{Binding events}"
                         IsHitTestVisible="False">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <ContentPresenter x:Name="itemTemplate" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Border>
        </Popup>
    </StackPanel>
</UserControl>

【讨论】：