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

[Solved] TileView with button inside can float only on border

1 Answer 127 Views

TileView

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

This question is locked. New answers and comments are not allowed.

Michele asked on 31 Oct 2012, 09:48 AM

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 >

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

</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}">

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

<Button Content="{Binding Text}" VerticalAlignment="Center" HorizontalAlignment="Center"

cal:Message.Attach="[Event Click] = [Action OpenMenuItem($dataContext)]"/>

</DataTemplate>

</telerik:RadTileView.ItemTemplate>

</telerik:RadTileView>

</Grid>

1 Answer, 1 is accepted

answered on 02 Nov 2012, 02:20 PM

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.