How can I get Max/Min button elsewhere in TileViewControl?

[Özgür]

Hello,

I created a design like below. I want to enlarge TileViewItem by pressing Details button inside TileViewItem. You said that it can be done manually as follows.

item.TileViewItemState = TileViewItemState.Maximized;

But I am not sure how to access the object.

When I do as below, the item object becomes null.

private void Button_Click(object sender, RoutedEventArgs e)

{

var item = tileViewControl.Items[0] as TileViewItem;

item.TileViewItemState = TileViewItemState.Maximized;

}

My Tile Control

   <syncfusion:TileViewControl x:Name="tileViewControl"

                                        AllowItemRepositioning="False"

                                        AnimationDuration="00:00:00.700"

                                        Margin="50"

                                        ColumnCount="4"

                                        RowCount="3"

                                        EnableAnimation="True"

                                        HorizontalScrollBarVisibility="Visible"

                                        VerticalScrollBarVisibility="Visible"

                                        IsVirtualizing="True"

                                        ItemTemplate="{StaticResource NormalTemplate}"

                                        ItemsSource="{Binding EmployeeDetails}"

                                        MaximizedItemTemplate="{StaticResource MaximizedTemplate}"

                                        MinimizedItemTemplate="{StaticResource MinimizedTemplate}"

                                        MinimizedItemsOrientation="Right"

                                        ItemContainerStyle="{StaticResource itemStyle}" >

            </syncfusion:TileViewControl>

    <Style TargetType="{x:Type syncfusion:TileViewItem}"

               x:Key="itemStyle">

            <Setter Property="MinMaxButtonStyle"

                    Value="{StaticResource maxMinButtonStyle}" />

            <Setter Property="Width"

                    Value="280" />

            <Setter Property="Height"

                    Value="320" />

            <Setter Property="HeaderVisibility"

                    Value="Collapsed" />

            <Setter Property="Background"

                    Value="Transparent" />

            <Setter Property="BorderBrush"

                    Value="Transparent" />

        </Style>

Attachment: File_8e5a6d10.rar

[Gokul Thanudhas]

Hi Ozgur,

When using itemsource, the Items will be the collection of your model class. Due to this, it returned null when you tried to access the collection as TileViewItem class.

You can achieve your requirement by binding the TileViewItemState with the property in your Model class. We have prepared a sample based on your requirement. Please refer to the sample and the video from the attachment for your reference

CodeSnippets

xaml

 <syncfusion:TileViewControl.ItemContainerStyle>

                <Style TargetType="{x:Type syncfusion:TileViewItem}">

                       <Setter Property="TileViewItemState" Value="{Binding State}"/>

                </Style>

  </syncfusion:TileViewControl.ItemContainerStyle>

Regards,

Gokul T.

 

           

Attachment: TileViewControlSample_e7c30640.zip

[Özgür]

Hello, thank you for your answer. I am encountering various bugs in these situations. Separately

ItemTemplate, MaximizedItemTemplate, MinimizedItemTemplate each have different designs when I set them, so I have to give commands to each of them. In the example you provided, I need to shrink one and enlarge the other. As one grows, the other has to shrink. I need to access the State of another Item from one Item, how is this possible?

Is there an alternative option?

[Özgür]

I solved the problem as below, but I am not sure if it is a healthy solution. Since I've implemented SetProperty, OnPropertyChanged won't fire unless State changes. This reduces the unnecessary processing load. But the higher the number of Items, the more items will be returned in the foreach. This is unnecessary processing load. Can a more efficient alternative be implemented ?

The MaximizeMinized function NormalizeTemplate and MinimizeTemplate run instantly. Normalized function MaximizeTemplate runs instantly.

private void MaximizeMinized(object sender, RoutedEventArgs e)

{

var viewModel = this.DataContext as TileControlViewModel;

foreach(var item in viewModel.TileItems)

{

if(item.ID == tileViewControl.SelectedIndex)

item.State = Syncfusion.Windows.Shared.TileViewItemState.Maximized;

else

item.State = Syncfusion.Windows.Shared.TileViewItemState.Minimized;

}

}

private void Normalized(object sender, RoutedEventArgs e)

{

var viewModel = this.DataContext as TileControlViewModel ;

foreach (var item in viewModel. TileItems )

{

item.State = Syncfusion.Windows.Shared.TileViewItemState.Normal;

}

}

[Gokul Thanudhas]

Hi Ozgur,

As other TileViewItems will be minimized when maximizing a TileViewItem, it is not necessary to change the state of other TileViewitem to Minimize State. Please refer to the below code snippets.

CodeSnippets

private void MaximizeMinized(object sender, RoutedEventArgs e)

{

        var viewModel = this.DataContext as TileControlViewModel;

         foreach(var item in viewModel.TileItems)

             {

                if(item.ID == tileViewControl.SelectedIndex)

                   {

                          item.State = Syncfusion.Windows.Shared.TileViewItemState.Maximized;

                           Break;

                    }

              }

}

private void Normalized(object sender, RoutedEventArgs e)

   {

     var viewModel = this.DataContext as TileControlViewModel ;

     foreach (var item in viewModel. TileItems )

        {

            if(item.ID == tileViewControl.SelectedIndex)

                 {
                     item.State = Syncfusion.Windows.Shared.TileViewItemState.Normal;

                 }

        }

}

For better performance you can use the Command instead of event for the Button.Please refer the sample for your reference

Regards,

Gokul T

Attachment: TileViewControl_ef910e7f.zip

[Özgür]

There is a problem with the code you suggested. For example ; If the previously maximum element is not made normal, it will not be maximum when clicked again. Because State data will not change.

[Gokul Thanudhas]

Hi Ozgur,

Sorry for the delay in getting back to you.

We are able to reproduce the issue from our end. When a TileViewItem is Maximized, the other tileviewItems state should be changed to minimized state. We will validate and update you in two business days. We appreciate your patience until then

Regards,

Gokul T

[Özgür]

Hile Gokul Thanudhas,

Any progress on the matter? I also found other problems. Should I open it in another thread or post it here?

[Harinath Navaneethakrishnan]

Hi Ozgur,

Query 1: Issue related to TileViewItemState

We have confirmed the reported scenario is a defect and logged a report for the reported scenario “TileViewItem state is not updated when the state of one tile view item is maximized”. We will include the fix in our upcoming Weekly NuGet release which is scheduled on 22nd November 2022. 

You can track the status of this defect using the following feedback link:

https://www.syncfusion.com/feedback/38780/tileviewitem-state-is-not-updated-when-state-of-one-tileview-item-is-maximized

If you have any more specification replication procedures or a scenario to be tested, you can add it as a comment in the portal.

Please let us know if you need any further assistance.

Note: The provided feedback link is private; you need to log in to view this feedback.

Query 2: Whether to create another thread for other problems

Please create a separate thread for each query or issue.

Regards,

Harinath N

[Özgür]

When I click on the link, I get a warning that this feedback is not associated with your account.    

[Harinath Navaneethakrishnan]

Hi Ozgur,

We have provided access to the feedback link to your credentials. So, please try clearing the cache and using an incognito window.

Regards,

Harinath N

[Harinath Navaneethakrishnan]

Sorry for the inconvenience, 

 

We are still working on this issue with high priority. We will update you on the fix in our upcoming NuGet release which is scheduled on 29th November 2022. 

 

We appreciate your patience until then. 

[Harinath Navaneethakrishnan]

We have included the fix in our latest Weekly NuGet release v20.3.0.59 which is available for download (https://www.nuget.org/). We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance.