NavigationItem Background

[Edoardo Gazzola]

Good Morning,

I need to flash the background on a certain NavigationItem, setting the property backgroun doesn't change color.

Attached is the project.

Thanks in advance

Attachment: wpfappmaster_94aa4c4.zip

[Shivani Ramakrishnan]

Hi Edoardo,

 

Query: Setting NavigationItem Background Color in SfNavigationDrawer

 

I understand that you're looking to customize the Background of the NavigationItem. Unfortunately, this feature is not directly available, but we do have a workaround for you. We've prepared a sample that demonstrates how to override the control template of the control.

 

For now, we have directly set the green color on the selection of the item in the style. You can customize this color based on your needs. However, we are not sure if we have addressed your specific concern. Could you please provide us with more details about your requirements? This will enable us to offer a more effective solution in a timely manner.

 

Regards,

Shivani

Attachment: NavDrawerSample_a7978d71.zip

[Edoardo Gazzola]

Hi  Shivani,

Thank you for yor answer.

My goal is to flash what you set green from code behind as a function of a variable.

If the variable is false the background color of the element and the icon remain the default, if the variable is true the background color and the icon change color (alternating from default and alternative icon and background color).

I remain at your disposal

[Shivani Ramakrishnan]

Hi Edoardo,

 

Query 1: Setting Flash animation For NavigationItem in SfNavigationDrawer

 

We have prepared the sample by setting flash for NavigationItem in SfNavigationDraw using ControlTemplate Triggers. Here is the code snippet:

<ControlTemplate.Triggers>

                                        <Trigger Property="IsSelected" Value="True">

                                            <Trigger.EnterActions>

                                                <BeginStoryboard>

                                                    <Storyboard>

                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" />

                                                    </Storyboard>

                                                </BeginStoryboard>

                                            </Trigger.EnterActions>

                                            <Trigger.ExitActions>

                                                <BeginStoryboard>

                                                    <Storyboard>

                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" />

                                                    </Storyboard>

                                                </BeginStoryboard>

                                            </Trigger.ExitActions>

                                            <Setter Property="FontWeight" Value="Bold"/>

                                            <Setter Property="Foreground" Value="DarkRed"/>

                                            <Setter Property="FontStretch" Value="Expanded"/>

                                            <Setter Property="SelectionBackground" Value="Transparent"/>

                                        </Trigger>

<ControlTemplate.Triggers>

 

Query 2: Setting Background and Icon Color while selecting NavigationItem

We have changed the Bacgkround and Icon color by overriding the control template of the control. Here is the code snippet:

<Trigger Property="IsSelected" Value="True">

                                    ...............................

                                    ...............................

                                            <Setter Property="FontWeight" Value="Bold"/>

                                            <Setter Property="Foreground" Value="DarkRed"/>

                                            <Setter Property="FontStretch" Value="Expanded"/>

                                            <Setter Property="SelectionBackground" Value="Transparent"/>

We have attached the sample for your reference. Kindly refer the sample and please let us know if you need any other details.

Regards,

Shivani

Attachment: NavDrawerSample_78d18aa4.zip

[Edoardo Gazzola]

Hi  Shivani,

Thanks for the reply,

i would like to change background via code behind via timer and value of a variable.

For now I'm blinking as per the attached video.

Attachment: 20230320_162233_e0c43226.zip

[Shivani Ramakrishnan]

Hi Edoardo,

 

Query : Blinking Text Color of Navigation Item in SfNavigationDrawer

 

Based on your requirements "Blinking Text Color of Navigation Item in SfNavigationDrawer", we have prepared the sample in code behind using Timer. Here is the code snippet:

 

private void Timer_Tick(object? sender, EventArgs e)
        {
            if (BlinkOn)
            {
                home.Foreground = new SolidColorBrush(Colors.DarkBlue);
                ricette.Foreground = new SolidColorBrush(Colors.DarkBlue);
                manuale.Foreground = new SolidColorBrush(Colors.DarkBlue);                
                segnalazioni.Foreground = new SolidColorBrush(Colors.DarkBlue);

            }
            else
            {
                home.Foreground = home.IsSelected? new SolidColorBrush(Colors.DarkRed) : new SolidColorBrush(Colors.DarkBlue);
                ricette.Foreground = ricette.IsSelected ? new SolidColorBrush(Colors.DarkRed) : new SolidColorBrush(Colors.DarkBlue);
                manuale.Foreground = manuale.IsSelected ? new SolidColorBrush(Colors.DarkRed) : new SolidColorBrush(Colors.DarkBlue);
                segnalazioni.Foreground = segnalazioni.IsSelected ? new SolidColorBrush(Colors.DarkRed) : new SolidColorBrush(Colors.DarkBlue);
            }
            BlinkOn = !BlinkOn;
        }

We have attached the sample for your reference . Kindly refer the sample and please let us know if you need any other details.

 

Regards,
Shivani

Attachment: BlinkingTextColor_8b88500f.zip

[Edoardo Gazzola]

Hi Shivani.

Thank you for your example.

What you pointed out to me is what I am currently doing.

My goal is to change the background of the item from code behind (not icon and text),

as you tried to do via xaml in modifying the template (green color of first example).

Can we navigate through the visual tree and change the property via code behind...?

I don't want to insist, if it's not possible I'll flash the icon and text.

[Shivani Ramakrishnan]

Hi Edoardo,

 

Currently, we are validating the reported query and we will let you know the details on March 27th, 2023. We appreciate your patience until then.

Regards,
Shivani

[Edoardo Gazzola]

Hi Shivani,

I will wait for your reply.

Thank you

[Shivani Ramakrishnan]

Hi Edoardo,

Sorry for inconvience.

Currently, we are validating the reported query with high priority and we will let you know the details on March 29th, 2023. We appreciate your patience until then.

Regards,
Shivani

[Edoardo Gazzola]

Ok Shivani...Thank you

Regards

[Arunachalam Kandasamy Raja]

Hi Edoardo,

 

Thanks for your patience.

 

After validating the reported query, we discovered that transferring the animation part from XAML code to code-behind is not possible because SelectedBackgroundColor is not a property of BackgroundColor. Additionally, we obtained the UI of the NavigationDrawer through customization, which resulted in all parts being on the XAML page. As a result, it is not possible to separate the animation part from XAML.

 

However, we made changes to the XAML code to obtain the correct animation. We have attached a sample of the updated code for your review. Please let us know if this feature satisfies your requirements.

 

Regards,

Arunachalam K

Attachment: wpfappmaster_2cb4ba96.zip

[Edoardo Gazzola]

Hi  Arunachalam,

Ok...Thank you for the technical support.

Regards

[Preethi Rajakandham]

Hi Edoardo,

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help.

Regards,

Preethi R