Question

This is (should be) a simple question.
I’d like to create a component like the Facebook notification button (so if you click it a drop down menu appears, and there is the “badge” with the number of unread notification).

I thought to customize the default combo box component (it has the popup and the toggle button), by removing the textfield and the arrow inside the toggle button, and by adding the toggle button inside a canvas so I can absolutely position the badge.

So.. I want to “export” some basic behavior, and the possibility to further stylish the component (like setting a template for the toggle button, for the badge and for each item in the list).

I can’t find how can I achieve this.. make a “first” level of style so that people who use my component don’t know it is a combo box, but instead they can set my properties (like “ButtonContent”, “NotificationItem” and “Badge”)…

Thank you.
Francesco

Answer 1

I decided not to style the combo box, but to create a new component (strongly inspired by the combo box)

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