Question

这是（应该）一个简单的问题。我想创建一个像Facebook通知按钮的组件（所以如果你点击它会出现一个下拉菜单，并且有一个带有未读通知号码的“徽章”）。

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

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

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

谢谢。弗朗西斯

Answer 1

如果您不介意支付第三方组件，则总是RadControls for Silverlight from Telerik。该套件包含RadDropDownButton control，我认为应该完全按照您的需要进行操作。

Answer 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>

自定义silverlight组合框组件

2 个答案: