TileView with button inside can float only on border

2 posts, 0 answers
  1. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 31 Oct 2012 Link to this post

    Hello,
    I've got a tileview that contains a button inside...If I Click on the border of the tile I can drag it, otherwise if I click in the center of the botton then I drag it can't.... what am I doing wrong?
    Thanks
    Here's my code

    <Style TargetType="telerik:RadTileViewItem" x:Key="RadTileViewItemStyle">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Foreground" Value="#FFFFFF" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Padding" Value="10" />
                <Setter Property="TileState" Value="Restored" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:RadTileViewItem">
                            <Grid Height="Auto" Margin="0 5 0 0">
                                <Border >
                                    <!--Style="{StaticResource Header}"-->
                                    <Grid>
                                        <Border x:Name="GripBarElement" Background="Green">
                                            <ContentPresenter x:Name="HeaderElement" HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch" Margin="10 0"
                                            ContentTemplate="{TemplateBinding HeaderTemplate}" />
                                        </Border>
                                    </Grid>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
     
            <converter:ButtonColorConverter x:Key="colorConverter"></converter:ButtonColorConverter>
            <Style x:Key="BtnMADMenuMetroStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <StackPanel Background="Green" x:Name="btnRoot" Margin="5,5,5,5" >
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.3"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="btnRoot" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" To="GreenYellow" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid Height="210" Width="210" Margin="5,5,5,5"  x:Name="grid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="75"/>
                                        <ColumnDefinition Width="125"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="100"/>
                                        <RowDefinition Height="100"/>
                                    </Grid.RowDefinitions>
                                    <Canvas Grid.Row="0" Grid.Column="0" x:Name="IconMenuItem" Background="Transparent" Height="75" >
                                        <Path Fill="{StaticResource text}" Data="{Binding PathString, Mode=TwoWay}"
                                                  Stretch="Fill" Margin="0" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Height="75" Width="75" >
                                            <Path.RenderTransform>
                                                <CompositeTransform ScaleX="0.7" ScaleY="0.7"/>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Canvas>
                                    <TextBlock Grid.Row="0" Grid.Column="1" x:Name="HeaderMenuItem" Text="{Binding Text}" Foreground="{StaticResource text}"
                                           HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0"
                                           FontSize="15" FontWeight="{StaticResource fontbold}"  TextWrapping="Wrap" ></TextBlock>
                                    <TextBlock x:Name="DescrMenuItem" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" AllowDrop="True" TextWrapping="Wrap"
                                               HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="{StaticResource text}"
                                               Text="{Binding ExtendedDescription}" FontSize="12" FontWeight="Normal"></TextBlock>
                                </Grid>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="FontWeight" Value="{StaticResource fontbold}"/>
                <Setter Property="FontSize" Value="15"/>
                <Setter Property="Foreground" Value="{StaticResource text}"/>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>
     
    <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Stretch"  
          DataContext="{Binding MenuHelper.RootMenuItem,Mode=TwoWay}">
        <!--Background="Transparent"-->
        <Grid x:Name="contentControl">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" ></RowDefinition>
            </Grid.RowDefinitions>
     
            <telerik:RadTileView Grid.Row="0" ItemsSource="{Binding Items,Mode=TwoWay}" x:Name="lstBoxMenu"
                SelectionMode="Single" ColumnWidth="Auto"  RowHeight="Auto" ItemContainerStyle="{StaticResource RadTileViewItemStyle}"
                telerik:TileViewPanel.IsRowsShrinkEnabled="True" telerik:TileViewPanel.IsSizeBoundToPosition="True" MaximizeMode="Zero">
     
                <telerik:RadTileView.ItemTemplate >
                    <DataTemplate>
                        <!--Style="{StaticResource BtnMenuMetroStyle}"-->
                        <Button Content="{Binding Text}" VerticalAlignment="Center" HorizontalAlignment="Center"
                                cal:Message.Attach="[Event Click] = [Action OpenMenuItem($dataContext)]"/>
                        <!-- Style="{Binding Path=TipoBottone,Converter= { StaticResource colorConverter}}"-->
                        <!-- Style="{StaticResource BtnMADMenuMetroStyle}"-->
                    </DataTemplate>
                </telerik:RadTileView.ItemTemplate>
            </telerik:RadTileView>
        </Grid>
    </Grid>

  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 02 Nov 2012 Link to this post

    Hi Paolo,

    Let me make a quick clarification first. If you use a Button in the content of the RadTileViewItem a drag operation can not be started from it because all buttons are handling the MouseDown event. However, the inner logic of the RadTileView control allows you to start a drag operation only inside the Header of the TileViewItem. Starting a drag operation inside the content can be implemented by replacing the default style of the control with a custom one. You can read more information about changing the template of a control in our Help documentation

    Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
Back to Top