TileView with button inside can float only on border

[Michele]

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>

[Pavel R. Pavlov]

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