I hope to get around to actually creating some useful documentation but no promises.

First you need to set a reference in your silverlight project to this project or dll. Then you need to create an alias in the Xaml page you want to use the control in.

xmlns:Ag_Controls="clr-namespace:iSheeple.Silverlight.Controls;assembly=iSheeple.Silverlight.Controls.AutoExpandOver"

To get you started keep in mind the control is based on a ContentControl. This means it has a Header, and a Content. The Header can be defined inline with the control definition, or if can be broken out to include any XAML you want.

//inline

<Ag_Controls:AutoExpandOver Header="Some Header Text" OpenOnHover="True" CloseOnHover="True">
    // any neato xaml you want to show in the popup when the header hovered
</Ag_Controls:AutoExpandOver>


or

<Ag_Controls:AutoExpandOver OpenOnHover="True" CloseOnHover="True">
    <Ag_Controls:AutoExpandOver.Header>
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Some HeaderText/>
            <TextBlock Text="Something else"/>
        </StackPanel>
    </Ag_Controls:AutoExpandOver.Header>
    <Grid>
        <TextBox/>
        <ComboBox/>
    </Grid>
</Ag_Controls:AutoExpandOver>



The Header and Content and literally contain any valid Xaml.

This control has NO look to it. It only shows what you put in it. You can size the popup anyway you want and it shows relative to the location of the Header content. You can adjust position through HorizontalAlignment and VerticalAlignment or you can use margins on the Content.

If you want to put this control inside a container and you see the popup does not get bigger then the container - use a Canvas control in the Content as the top-most item. the popup will then be whatever size the Content grows to.

Here is a typical use for me - this is actually inside a CellTemplate in a DataGrid (RadGridView). It opens when you hover the icon and shows whatever the ItemsControl is bound to. It also has a dropshadow on the popup content for pretty effect (chicks dig it).

<GcsAg_Controls:AutoExpandOver IsTabStop="False" Grid.Column="1" VerticalAlignment="Center" Width="17" Height="16" Margin="1,0,4,0" OpenOnClick="False" OpenOnFocus="False" OpenOnHover="True" MakeModal="True">
    <GcsAg_Controls:AutoExpandOver.Header>
        <Grid>
            <Image Height="16" Width="16" Source="{Binding UserNotification.SummaryImageSource}"/>
        </Grid>
    </GcsAg_Controls:AutoExpandOver.Header>
    <Canvas>
        <Grid>
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White" >
                <Grid.Effect>
                    <DropShadowEffect ShadowDepth="1" Opacity=".5" BlurRadius="6"/>
                </Grid.Effect>
            </Grid>
            <Grid Background="#FFFDFEE6" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <StackPanel Margin="4,4,4,4" Orientation="Vertical">
                    <ItemsControl ItemsSource="{Binding UserNotification.Notifications.View}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Height="12" Width="12" Source="{Binding ImageSource}">
                                        <ToolTipService.ToolTip>
                                            <TextBlock FontSize="9" Text="{Binding Details}" MaxWidth="400" TextWrapping="Wrap"/>
                                        </ToolTipService.ToolTip>
                                    </Image>
                                    <TextBlock Margin="3,0,0,0"  Text="{Binding Message}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                    <Rectangle Fill="Silver" Height="1" Visibility="{Binding EntityPromoted.MappedValue, Converter={StaticResource TrueToVisible}}" HorizontalAlignment="Stretch" Margin="3,2,3,2" />
                    <StackPanel Orientation="Horizontal" Visibility="{Binding EntityPromoted.MappedValue, Converter={StaticResource TrueToVisible}}">
                        <Button ToolTipService.ToolTip="Sync Deal" Margin="0,0,0,0" Style="{StaticResource ImageButtonStyle}" Command="{Binding SyncDealCommand}" CommandParameter="{Binding}" IsTabStop="False">
                                <Image Source="/Png.GcsAg.Infrastructure;component/Resources/Images/sync-16x16.png"/>
                        </Button>
                        <TextBlock Margin="1,0,0,0" FontWeight="Bold" Text="Sync" VerticalAlignment="Center"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </Grid>
    </Canvas>
</GcsAg_Controls:AutoExpandOver>

Last edited Feb 24, 2012 at 6:26 PM by midnit, version 2

Comments

No comments yet.