We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

NavigationItem Background

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

13 Replies

SR Shivani Ramakrishnan Syncfusion Team March 16, 2023 09:45 AM UTC

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


EG Edoardo Gazzola March 16, 2023 10:27 AM UTC

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



SR Shivani Ramakrishnan Syncfusion Team March 17, 2023 12:27 PM UTC

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


EG Edoardo Gazzola March 20, 2023 03:28 PM UTC

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


SR Shivani Ramakrishnan Syncfusion Team March 22, 2023 07:43 AM UTC

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


EG Edoardo Gazzola March 22, 2023 09:08 AM UTC

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.



SR Shivani Ramakrishnan Syncfusion Team March 23, 2023 06:22 PM UTC

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



EG Edoardo Gazzola March 24, 2023 07:31 AM UTC

Hi Shivani,

I will wait for your reply.

Thank you



SR Shivani Ramakrishnan Syncfusion Team March 27, 2023 05:42 PM UTC

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



EG Edoardo Gazzola replied to Shivani Ramakrishnan March 28, 2023 01:28 PM UTC

Ok Shivani...Thank you

Regards



AK Arunachalam Kandasamy Raja Syncfusion Team March 29, 2023 03:12 PM UTC

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


EG Edoardo Gazzola March 30, 2023 06:49 AM UTC

Hi  Arunachalam,

Ok...Thank you for the technical support.

Regards



PR Preethi Rajakandham Syncfusion Team March 31, 2023 07:11 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon