Interaction with control inside tile

[sally an]

hello

I have a tileViewControl whih hosts different items using ItemTemplateSelector, the items are created fine, but I need to interact with the control inside the Item. In my case, I have a chart inside each tile, and I need to interact with these charts, right now I cannot, my chart interactions seem to be gone inside the tile, could you please advise?

thanks.

[Unknown]

Hi Sally , 

Thanks for contacting Syncfusion support. 

We have checked your requirement” Need to know how to interact with the controls inside ItemTemplateSelector” but there is no solution to access control inside the items in template by code behind. But your requirement can be achieved if you use an UserControl in the items in Template. The below example reflects the same and explains how to use the controls used in UserControl in code behind of MainWindow for your requirement.  

Sample :  https://www.syncfusion.com/downloads/support/forum/153107/ze/TileVIew_DataTemplate799563923  

Regards, 

Niranjan Kumar Gopalan 

[sally an]

Thanks for your response, I opened the example app, I do see a chart in tile, but still there is no interaction with this chart, mouse hover or click in chart shows no response, could you please advise?

[sally an]

also, upon checking my code, my template does use a UserControl, like code below:

(charts:HistogramChart is UserControl, same as charts:ScatterChart and charrts:SideBySideChart)

<DataTemplate x:Key="histoChart" DataType="{x:Type chartvm:HistogramViewModel}" >

        <charts:HistogramChart DataContext="{Binding}"/>

    </DataTemplate>

    <DataTemplate x:Key="scatterChart" DataType="{x:Type chartvm:ScatterChartViewModel}">

        <charts:ScatterChart DataContext="{Binding}"/>

    </DataTemplate>

    <DataTemplate x:Key="sideBySideChart" DataType="{x:Type chartvm:SideBySideChartViewModel}">

        <charts:SideBySideChart DataContext="{Binding}"/>

    </DataTemplate>

and the tile control

<syncfusion:TileViewControl  x:Name="tvControl"  ItemsSource="{Binding Tiles}" SelectedItem="{Binding SelectedTile, Mode=TwoWay}"

                  ItemTemplateSelector="{StaticResource myTileSelector}" AllowItemRepositioning="True">

        </syncfusion:TileViewControl>

Selector resource:

<localrsc:TileSelector x:Key="myTileSelector" 

                                   HistoTemplate="{StaticResource histoChart}" 

                                    ScatterTemplate="{StaticResource scatterChart}"

                                    SideBySideTemplate="{StaticResource sideBySideChart}"

                                    ColorBlockTemplate="{StaticResource colorBlockTile}"

Please advise, thanks.

                                   />

[Unknown]

Hi Sally, 

Thanks for your update. 

We have checked your query and the code you have shared us. The controls in UserControl can be accessed by Loaded event of UserControl as shown in below code snippet. Please refer the attached video and code snippet which explains how the MouseDoubleClick and MouseEnter events of SfChart control in UserControl has been accessed and let us know if you have further queries. 

XAML: 

<Window.Resources> 

        <local:TileViewItemTemplateSelector x:Key="tileViewItemTemplateSelctor" /> 

        <DataTemplate x:Key="Item1Template"> 

            <local:UserControlNew x:Name="userControl" Loaded="userControl_Loaded" /> 

        </DataTemplate> 

        <DataTemplate x:Key="Item2Template"> 

            <TextBlock Background="Red" /> 

        </DataTemplate> 

        <DataTemplate x:Key="Item3Template"> 

            <TextBlock Background="LawnGreen" /> 

        </DataTemplate> 

    </Window.Resources> 

C#: 

private void userControl_Loaded(object sender, RoutedEventArgs e) 

        { 

            var ChartControl = (sender as UserControlNew).FindName("Chart"); 

            if(ChartControl !=null) 

            { 

                (ChartControl as SfChart).AreaBackground = new SolidColorBrush(Colors.Cyan); 

 

                (ChartControl as SfChart).MouseDoubleClick += MainWindow_MouseDoubleClick; 

                (ChartControl as SfChart).MouseEnter += MainWindow_MouseEnter; 

            } 

        } 

 

        private void MainWindow_MouseEnter(object sender, MouseEventArgs e) 

        { 

           

        } 

 

        private void MainWindow_MouseDoubleClick(object sender, MouseButtonEventArgs e) 

        { 

 

        } 

Video: https://www.syncfusion.com/downloads/support/forum/153107/ze/TileView_UserControl_-409341090  

Regards, 

Niranjan Kumar Gopalan