RadListbox + popup

3 posts, 0 answers
  1. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 24 May 2012 Link to this post

    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. George
    Admin
    George avatar
    1332 posts

    Posted 30 May 2012 Link to this post

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

  3. UI for WPF is Visual Studio 2017 Ready
  4. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 30 May 2012 Link to this post

    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
Back to Top