RadListbox + popup

[ITA]

Hi,

i'm using the example "RadListBox Drag and Drop":

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Border Grid.Row="0" Height="22" BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1"
          VerticalAlignment="Top" Background="#FFF7F7F7" HorizontalAlignment="Stretch">
    <TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="Final tournament" Margin="6 2 2 2"  />
  </Border>
  <telerik:RadListBox Grid.Row="1" AllowDrop="True" ItemsSource="{Binding GroupD}"
                     ItemTemplate="{StaticResource ListBoxItemTemplate}">
  <telerik:RadListBox.DragVisualProvider>
    <telerik:ScreenshotDragVisualProvider />
    </telerik:RadListBox.DragVisualProvider>
    <telerik:RadListBox.DragDropBehavior>
    <telerik:ListBoxDragDropBehavior AllowReorder="True" />
  </telerik:RadListBox.DragDropBehavior>
</telerik:RadListBox>
                </Grid>

Now i want to add a "popup-control" to the ListboxItems.

<Popup x:Name="popUpnotifyIcon" AllowsTransparency="True" PopupAnimation="Fade" Placement="Top"  PlacementTarget="{Binding ElementName=yahoo}" HorizontalOffset="0" VerticalOffset="20" >
    <Viewbox VerticalAlignment="Top" >
        <TextBlock Text="dfsdfsdf" />
    </Viewbox>
</Popup>

But how do i open the popup when i click a Listboxitem or onmouseover on listboxitem?

Thanks
Rene

[George]

Hi Rene,

I would suggest using a ToolTip control instead of a Popup. Please, give it a try and let me know if this helps.
 

Greetings,
George
the Telerik team

[ITA]

hi,

now i'm using a popup control, which works fine, but i want to open a Grid with a storyboard next to the popup-control.

Storyboard:

<Storyboard x:Key="GridOpen">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="popupmenu" Storyboard.TargetProperty="(FrameworkElement.Width)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="100"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="popupmenu" Storyboard.TargetProperty="(Canvas.Left)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="100"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="GridClose">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="popupmenu" Storyboard.TargetProperty="(FrameworkElement.Width)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="popupmenu" Storyboard.TargetProperty="(Canvas.Right)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

XAML:

<ListBox x:Name="myVerifyBox" BorderThickness="0" telerik:StyleManager.Theme="Summer" ItemsSource="{Binding MyVerifies, Source={StaticResource ViewModel}}"
         AllowDrop="True" Background="Transparent" BorderBrush="Transparent"  ItemContainerStyle="{StaticResource draggableItemStyle}"
         Margin="0,10,0,0" ScrollViewer.HorizontalScrollBarVisibility="Hidden" Grid.Row="0">
   <ListBox.ItemTemplate>
      <DataTemplate>
         <Border HorizontalAlignment="Center" Style="{StaticResource ListItemBorder}" Width="{Binding ElementName=myVerifyBox, Path=ActualWidth, Converter={StaticResource widthConverter}}" VerticalAlignment="Center" x:Name="yahoo" >
            <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="#FFEFEFEF" Offset="0" />
           <GradientStop Color="#FFE2DFDF" Offset="0.747" />
           </LinearGradientBrush>
        </Border.Background>
     <Grid Name="KontaktItemInner">
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="30" />
           <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="0">
           <Ellipse Canvas.Top="-1.2" Canvas.Left="2" Height="20" Width="20" StrokeThickness="1" Stroke="#FFD4D4D4">
              <Ellipse.Fill>
                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFD8D8D8" Offset="0.407" />
                    <GradientStop Color="#FFEFEFEF" Offset="1" />
                 </LinearGradientBrush>
              </Ellipse.Fill>
           </Ellipse>
           <Ellipse Canvas.Top="2.5" Canvas.Left="5.7" Height="12" Width="12" StrokeThickness="1" Stroke="#0f7295" Fill="{Binding Farbe}" />
        </Canvas>
        <TextBlock Text="{Binding Name}" FontFamily="Calibri" FontSize="14" VerticalAlignment="Top" Foreground="Black" Grid.Column="1" />
           <Canvas>
              <Popup Name="popup" IsOpen="False" PopupAnimation="Fade" PlacementTarget="{Binding ElementName=yahoo}" MinHeight="150" AllowsTransparency="True" >
                 <Border BorderThickness="1" CornerRadius="4" Background="#FFCECECE" BorderBrush="#FFC4C2C2">
                    <Grid Name="PopupVerify">
                       <Grid.RowDefinitions>
                          <RowDefinition />
                          <RowDefinition />
                          <RowDefinition />
                          <RowDefinition />
                       </Grid.RowDefinitions>
                       <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="20" />
                          <ColumnDefinition Width="*" />
                       </Grid.ColumnDefinitions>
                       <TextBlock Text="{Binding Name}" Grid.Row="1" Grid.Column="1" />
                    </Grid>
                 </Border>
              </Popup>
              <Grid Name="popupmenu" Background="Yellow" MinHeight="150">
                 <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                 </Grid.RowDefinitions>
              </Grid>
              <Canvas.Triggers>
                 <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard Storyboard="{StaticResource GridOpen}"/>
                 </EventTrigger>
                 <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard Storyboard="{StaticResource GridClose}"/>
                 </EventTrigger>
              </Canvas.Triggers>
           </Canvas>
        </Grid>
     </Border>
     <DataTemplate.Triggers >
        <DataTrigger  Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" Value="True">
           <Setter TargetName="popup" Property="IsOpen" Value="True" />
        </DataTrigger>
     </DataTemplate.Triggers>
      </DataTemplate>
   </ListBox.ItemTemplate>
   <telerik:ListBoxDragDrop.Behavior>
      <telerik:ListBoxDragDropBehavior />
   </telerik:ListBoxDragDrop.Behavior>
   <telerik:ListBoxDragDrop.DragVisualProvider>
      <local:DragVisualProvider DraggedItemTemplate="{StaticResource ApplicationDragTemplate}"/>
   </telerik:ListBoxDragDrop.DragVisualProvider>
</ListBox>

The Problem is, that the Grid "popupmenu" is opend in the center of the Listboxitem and not next to the popup and the second Problem ist, that the Grid "popupmenu" ist behind a ListboxItem if there are more the one Item in the ListBox.

Thanks for helping me
Regards
Rene