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

Unable to color just one element of file dialog

3 Answers 87 Views
FileDialogs
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 2
Iron
Iron
Veteran
Joe asked on 09 Jan 2021, 10:33 PM
I am using the Windows8Touch theme with custom colors I generated via the Theme color generator application It works well.  Except for one thing.  In the File Open dialog, no matter what I do, I cannot get one of the text labels -- just the one -- to honor any of the colors I set. 

It is the label at the bottom of the dialog that says "File Name" (at least when English is the language).  It is next to an edit box that shows the file name.  No matter what I do, that little label always shows up as black.   I have attached an image showing what I mean.  The label that I cannot color is circled in red in the image

So I have two questions:

1. Is there some Palette color I can set in the Windows8Touch theme that will make this little label get colored correctly -- without forcing me to write a style or control template?
2. If not, and I am forced to restyle the control myself, then in what part of of what control template or style do I change something?   (Note that I have tried already - copying the DialogWindowTemplate et al and setting both Foreground and TextElement.Foreground in a few places but I cannot figure out where it would go)

If it matters, here are the custom colors I am using:

<Color x:Key="GsBackgroundDarkColor"            >#002B35</Color>
<Color x:Key="GsForegroundLightColor"           >#FFFFFFFF</Color>
<Color x:Key="GsMediumColor"                    >#FFC0C0C0</Color>
<Color x:Key="GsLowColor"                       >#758595</Color>
<Color x:Key="GsHighColor"                      >#FFBDBDC2</Color>
<Color x:Key="GsAccentColor"                    >#FF26A0DA</Color> <!-- This is the standard Windows8Touch accent color-->
<Color x:Key="GsEffectHighColor"                >#92376472</Color>
<Color x:Key="GsEffectLowColor"                 >#FF1E2D3A</Color>


And here is my initialization code where I set up the Windows8TouchPaele


var palette = Windows8TouchPalette.Palette;
 
 
palette.FontSizeXXL = UserSettings.FontSizeTitle;
palette.FontSizeXL  = UserSettings.FontSizeHeader;
palette.FontSizeL   = UserSettings.FontSize;
palette.FontSize    = UserSettings.FontSizeMedium;
palette.FontSizeS   = UserSettings.FontSizeSmall;
 
palette.FontFamily  = new FontFamily("Segoe UI");
 
 
if (Application.Current.TryFindResource("GsBackgroundDarkColor") is not Color backColor)
{
    Debug.Assert(false);
    Log.Error("Failed to find background color");
}
else
{
    palette.MainColor               = backColor;
    palette.InvertedForegroundColor = backColor;
}
 
if (Application.Current.TryFindResource("GsForegroundLightColor") is not Color foreColor)
{
    Debug.Assert(false);
    Log.Error("Failed to find foreground light color");
}
else
{
    palette.MainForegroundColor = foreColor;
    palette.InvertedColor       = foreColor;
}
 
if (Application.Current.TryFindResource("GsLowColor") is not Color lowColor)
{
    Debug.Assert(false);
    Log.Error("Failed to find GsLowColor");
}
else
{
    palette.LowColor = lowColor;
}
 
if (Application.Current.TryFindResource("GsMediumColor") is not Color medColor)
{
    Debug.Assert(false);
    Log.Error("Failed to find GsMediumColor");
}
else
{
    palette.MediumColor = medColor;
}
 
if (Application.Current.TryFindResource("GsHighColor") is not Color highColor)
{
    Debug.Assert(false);
    Log.Error("Failed to find GsHighColor");
}
else
{
    palette.HighColor = highColor;
}
 
if (Application.Current.TryFindResource("GsAccentColor") is not Color accentColor)
{
    Debug.Assert(false);
    Log.Error("Failed to find GsAccentColor");
}
else
{
    palette.AccentColor = accentColor;
}
 
 
if (Application.Current.TryFindResource("GsEffectLowColor") is not Color effectLowColor)
{
    Debug.Assert(false);
    Log.Error("Failed to find GsEffectLowColor");
}
else
{
    palette.EffectLowColor = effectLowColor;
}
 
if (Application.Current.TryFindResource("GsEffectHighColor") is not Color effectHighColor)
{
    Debug.Assert(false);
    Log.Error("Failed to find effectHighColor");
}
else
{
    palette.EffectLowColor = effectHighColor;
}
 
 
 
var theme = new Windows8TouchTheme();
StyleManager.ApplicationTheme = theme;






3 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Stoyanov
Telerik team
answered on 13 Jan 2021, 02:57 PM

Hello Joe,

Thank you for the shared picture and code snippets. 

The specified element that shows the file name is a TextBlock and inherits its Foreground from up the visual tree. With this in mind you can consider setting the Foreground of the RadOpenFileDialog:

RadOpenFileDialog dialog = new RadOpenFileDialog() { Foreground = Brushes.White};
dialog.ShowDialog();
        

Note, that with this approach the Foreground will be applied to other elements within the dialog that inherit their Foreground as well. If you want to specifically target the exact TextBlock element, you can handle the Loaded event of the RadOpenFileDialog and find it via the ChildrenOfType extension method: 

            RadOpenFileDialog dialog = new RadOpenFileDialog() { Foreground = Brushes.White};
            dialog.Loaded += Dialog_Loaded;
            dialog.ShowDialog();

        private void Dialog_Loaded(object sender, RoutedEventArgs e)
        {
            var dialog = sender as RadOpenFileDialog;
            var grid = dialog.ChildrenOfType<Grid>().FirstOrDefault(g => g.Name == "PART_OperationsPane");

            var tb = grid.ChildrenOfType<TextBlock>().FirstOrDefault();
            tb.Foreground = Brushes.White;
        }

I hope you find this information helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Joe
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 13 Jan 2021, 04:51 PM
Hi Vladimir,

Thank you for your answer. Turns out I was already trying to do what you recommended but doing it totally wrong.

I copied the Telerik dialog styles locally, but I didn't set the foreground on my version of the base style (DialogWindowStyle) or even in my version my derived ones (RadOpenFileDialogStyle, RadSaveFileDialogStyle, etc). 

Instead, for some bizarre reason, I made a default style for DialogWindowBase, forgetting that the basic rules of styling controls would never let that work.   I must have stared at that for 2 hours without realizing.  But your answer and a fresh look made it stand right out.

Sorry to waste your time.  Thanks again.



0
Vladimir Stoyanov
Telerik team
answered on 14 Jan 2021, 11:22 AM

Hello Joe,

I am glad to hear that you were able to achieve the desired requirement. 

Don't hesitate to contact us again, if you have any other questions.

Regards,
Vladimir Stoyanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
FileDialogs
Asked by
Joe
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Vladimir Stoyanov
Telerik team
Joe
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or