This is a migrated thread and some comments may be shown as answers.

RadListbox + popup

2 Answers 126 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
ITA
Top achievements
Rank 1
ITA asked on 24 May 2012, 06:21 PM
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

2 Answers, 1 is accepted

Sort by
0
George
Telerik team
answered on 30 May 2012, 09:31 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
ITA
Top achievements
Rank 1
answered on 30 May 2012, 09:38 AM
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
Tags
ListBox
Asked by
ITA
Top achievements
Rank 1
Answers by
George
Telerik team
ITA
Top achievements
Rank 1
Share this question
or