Forums Home / ComponentOne / WPF Edition
Posted by: Jeff.Huckins on 16 September 2023, 7:45 am EST
Jeff.Huckins
Posted 16 September 2023, 7:45 am EST - Updated 16 September 2023, 8:19 am EST
I need to know how to create a style for .NET 6 C1.WPF.Viewer.FlexViewer. Our application has a rich dark blue color scheme, so I need to change the colors for the FlexViewer, in particular, the toolbar. Currently, since our application’s foreground color is white, the test in the toolbar doesn’t show up.
aastha.gupta
Posted 18 September 2023, 2:40 am EST
Hi Jeff,
Unfortunately, there is no direct way to apply styling to the flexviewer’s toolbar. However, you can consider a workaround of modifying the template of the flexviewer toolbar when the control is loaded. Kindly refer to the following code snippet for implementation:
private void fv_Loaded(object sender, RoutedEventArgs e)
{
var flexViewer = sender as FlexViewer;
var mainToolBar = flexViewer.Template.FindName("mainToolbar", flexViewer) as MainToolbar;
var toolStrip = mainToolBar.Template.FindName("toolBarStack", mainToolBar) as C1ToolStrip;
mainToolBar.Foreground = Brushes.White;
toolStrip.Background = Brushes.DarkBlue;
(mainToolBar.Template.FindName("menuLayout", mainToolBar) as C1MenuTool).Background = Brushes.DarkBlue;
(mainToolBar.Template.FindName("pageNumberTextBox", mainToolBar) as C1TextBox).Foreground = Brushes.DarkBlue;
(mainToolBar.Template.FindName("pageNumberTextBox", mainToolBar) as C1TextBox).CaretBrush = Brushes.DarkBlue;
}You can further modify the template to achieve the desired behavior. Please refer to the attached sample for full implementation. (See FlexviewerStyle.zip)
Thanks & Regards,
Aastha
Jeff.Huckins
Posted 18 September 2023, 3:24 am EST - Updated 18 September 2023, 3:29 am EST
aastha.gupta
Posted 18 September 2023, 6:33 pm EST - Updated 18 September 2023, 6:38 pm EST
Hi Jeff,
We are working with version 6.0.20232.624 control and we could not replicate the issue that you have mentioned using the code snippet that we have provided you. Please check the following GIF to check the behavior on our end:
We request you provide a stripped-down version of your sample application so that we can understand your implementation. Otherwise provide us with the code snippet that you have used to modify the appearance of the flexviewer.
Furthermore, please let us know the exact version of the FlexViewer control that you are working with along with your working environment details.
Thanks & Regards,
Aastha
Jeff.Huckins
Posted 19 September 2023, 4:58 am EST
I created a test application that behaved as yours did, however, probably due to the xaml styles for our application, the foreground for the dropdown for the Zoom Options is still white against a white background. Even if it was black as in your example, it wouldn’t be acceptable because the background for the Zoom Options dropdown is white, while the background for the Page Layout Options can be changed to our dark blue. Not professional.
It is really disappointing that color scheme for the C1 controls cannot be modified in a professional manner to match an applications custom color scheme.
I’ll have to just implement my own toolbar for the viewer.
aastha.gupta
Posted 20 September 2023, 5:45 am EST
Hi Jeff,
We are sorry for the inconvenience caused to you. We understand your concern regarding this issue to maintain a consistent look throughout your application. We assure you that your feedback is of utmost importance to us. We have escalated your concern to the development team for their insights on this. [Internal Tracking ID: C1XAML-35027]
We will update you on this as soon as we hear back from them.
Thanks & Regards,
Aastha
Jeff.Huckins
Posted 20 September 2023, 6:32 am EST
Thank you, Aastha. I do appreciate your efforts on this.
It really was easy for me to create my own toolbar to implement the PDF Viewer features that we need.
Jeff.Huckins
Posted 20 September 2023, 7:39 am EST - Updated 20 September 2023, 10:23 am EST
Aastha, I’ve attached a fairly feature-rich WPF C# PDF FlexViewer example app solution that allows a user to set a documents folder path and display a TreeView to navigate to PDF documents in the directory tree. It also implements UI tree updates using FileSystemWatcher.
aastha.gupta
Posted 20 September 2023, 6:26 pm EST
Hi Jeff,
It is great to see that you have figured out a way to achieve the required behavior while maintaining the look and feel of your application. We appreciate the efforts you have put in for sharing this information with us, along with a sample application that shows what you have implemented.
However, we will update you in case we get any information regarding the styling of the flexviewer’s toolbar. This could prove beneficial for both your team and ours in the future.
Thanks & Regards,
Aastha
