Skip to content

Commit 73237bf

Browse files
Nandhakumar-SF4686Nandhakumar-SF4686
committed
Adding changes
1 parent 3b80c2d commit 73237bf

File tree

1 file changed

+219
-0
lines changed

1 file changed

+219
-0
lines changed

‎Styles/StylingToolbarItem/README.md‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
# How to match the semantics of custom toolbar item with that of default one in .NET MAUI PDF Viewer?
2+
3+
This project demonstrate how to match the semantics of custom toolbar item with that of already existing toolbar item in the toolbar in [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).
4+
5+
## Prerequisites
6+
7+
1. A .NET MAUI project set up.
8+
2. The [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) package.
9+
10+
## Steps
11+
12+
### 1. Install Required NuGet Package
13+
14+
Create a new [MAUI App](https://dotnet.microsoft.com/en-us/learn/maui/first-app-tutorial/create) and install the [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) package using either.
15+
16+
* NuGet Package Manager
17+
* NuGet CLI
18+
19+
### 2. Add the Syncfusion.Maui.Themes namespace in `App.xaml`
20+
21+
This namespace enables access to the [SyncfusionThemeResourceDictionary](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeDictionary.html).
22+
23+
**XAML:**
24+
25+
```xaml
26+
xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
27+
```
28+
29+
### 3. Merge the `SyncfusionThemeResourceDictionary` to the Application Resource.
30+
31+
To apply themes to your application, merge the [SyncfusionThemeResourceDictionary](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeDictionary.html) item to the application resource.
32+
33+
**XAML:**
34+
35+
```xaml
36+
<Application xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
37+
...>
38+
<Application.Resources>
39+
<ResourceDictionary>
40+
<ResourceDictionary.MergedDictionaries>
41+
<syncTheme:SyncfusionThemeResourceDictionary />
42+
</ResourceDictionary.MergedDictionaries>
43+
</ResourceDictionary>
44+
</Application.Resources>
45+
</Application>
46+
```
47+
48+
### 4. Create a new folder and add a `ContentPage` (PdfViewerPage) under the created folder
49+
50+
Create a ContentPage which serves as a destination page of the Navigation.
51+
52+
### 5. Create two button in the `MainPage.Xaml`
53+
54+
Create two buttons.
55+
56+
**XAML:**
57+
58+
```xaml
59+
<Grid RowSpacing="10">
60+
<Grid.RowDefinitions>
61+
<RowDefinition Height="*"/>
62+
<RowDefinition Height="*"/>
63+
</Grid.RowDefinitions>
64+
<Button Text="Change Theme" Grid.Row="0" WidthRequest="150" HorizontalOptions="Center" VerticalOptions="End" HeightRequest="50"/>
65+
<Button Text="Go To PdfViewerPage" Grid.Row="1" WidthRequest="250" HorizontalOptions="Center" VerticalOptions="Start" HeightRequest="50"/>
66+
</Grid>
67+
```
68+
69+
### 6. Create clicked event handlers
70+
71+
#### a. Event Handler for Theme Change Button
72+
73+
In this event handler, you can set the theme change code as below using the merged [SyncfusionThemeResourceDictionary](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeDictionary.html).
74+
75+
**C#**
76+
77+
```csharp
78+
private void OnThemeChangeButtonClicked(object sender, EventArgs e)
79+
{
80+
if (Application.Current != null)
81+
{
82+
ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
83+
if (mergedDictionaries != null)
84+
{
85+
var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
86+
if (theme != null)
87+
{
88+
if (theme.VisualTheme == SfVisuals.MaterialLight)
89+
{
90+
theme.VisualTheme = SfVisuals.MaterialDark;
91+
Application.Current.UserAppTheme = AppTheme.Dark;
92+
}
93+
else
94+
{
95+
theme.VisualTheme = SfVisuals.MaterialLight;
96+
Application.Current.UserAppTheme = AppTheme.Light;
97+
}
98+
}
99+
}
100+
}
101+
}
102+
```
103+
104+
#### b. Event Handler for the Navigation button.
105+
106+
In this event handler, you can set the code `PDfViewerPage` navigation using the [Navigation.PushAsync](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.navigationpage.pushasync?view=net-maui-9.0) method.
107+
108+
**C#:**
109+
110+
```csharp
111+
private async void GotoPdfViewerPage(object sender, EventArgs e)
112+
{
113+
await Navigation.PushAsync(new PDFViewerPage());
114+
}
115+
```
116+
117+
### 7. Wire the clicked event handlers for the respective buttons
118+
119+
**XAML:**
120+
121+
```xaml
122+
<Grid RowSpacing="10">
123+
<Grid.RowDefinitions>
124+
<RowDefinition Height="*"/>
125+
<RowDefinition Height="*"/>
126+
</Grid.RowDefinitions>
127+
<Button Text="Change Theme" Clicked="OnThemeChangeButtonClicked" Grid.Row="0" WidthRequest="150" HorizontalOptions="Center" VerticalOptions="End" HeightRequest="50"/>
128+
<Button Text="Go To PdfViewerPage" Clicked="GotoPdfViewerPage" Grid.Row="1" WidthRequest="250" HorizontalOptions="Center" VerticalOptions="Start" HeightRequest="50"/>
129+
</Grid>
130+
```
131+
132+
### 8. Initialize and Configure the PDF Viewer
133+
134+
Start by adding the Syncfusion PDF Viewer control to your XAML file.
135+
136+
#### a. Add the Syncfusion.Maui.PdfViewer namespace in `PdfViewerPage.xaml`
137+
138+
This namespace enables access to the PDF Viewer control.
139+
140+
**XAML:**
141+
142+
```xaml
143+
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer"
144+
```
145+
146+
#### b. Add the PDF Viewer to your layout
147+
148+
**XAML:**
149+
150+
```xaml
151+
<Grid>
152+
<syncfusion:SfPdfViewer x:Name="pdfViewer" ></syncfusion:SfPdfViewer>
153+
</Grid>
154+
```
155+
156+
#### c. Load the PDF in `PdfViewerPage.Xaml.cs`
157+
158+
**C#:**
159+
160+
```csharp
161+
Stream? stream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("ReplaceToolbarItem.Assets.PDF_Succinctly.pdf");
162+
163+
// Assigning stream to "DocumentSource" property.
164+
pdfViewer.DocumentSource = DocumentStream;
165+
```
166+
167+
168+
### 9. Matching semantics of the custom toolbar item with default toolbar item
169+
170+
To match the text color of newly added toolbar item with that of default toolbar item in the toolbar, set the color of the [TextColor](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.button.textcolor?view=net-maui-9.0) for the button as that of the default toolbar item using the [SetAppThemeColor](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.bindableobjectextensions.setappthemecolor?view=net-maui-9.0) method. Refer to the below code example.
171+
172+
**C#:**
173+
174+
``` csharp
175+
// Create new open button
176+
fileOpenButton = new Button
177+
{
178+
Text = "\ue712", // Set button text
179+
FontSize = 24, // Set button text font size
180+
FontFamily = "MauiMaterialAssets", // Set button text font family
181+
BackgroundColor = Colors.Transparent, // Set background for the button
182+
BorderColor = Colors.Transparent, // Set border color for the button
183+
CornerRadius = 5, // Set corner radius of the button
184+
Opacity = 1,
185+
IsEnabled = true
186+
};
187+
188+
//Set color based on theme.
189+
fileOpenButton.SetAppThemeColor(Button.TextColorProperty,
190+
Color.FromArgb("#49454F"),
191+
Color.FromArgb("#CAC4D0"));
192+
193+
#if !WINDOWS && !MACCATALYST
194+
// Inserting open file option button as toolbar item in the top toolbar for the mobile platform.
195+
PdfViewer?.Toolbars?.GetByName("TopToolbar")?.Items?.Insert(0, new Syncfusion.Maui.PdfViewer.ToolbarItem(fileOpenButton, "FileOpenButton"));
196+
#else
197+
// Inserting open file option button as toolbar item in the primary toolbar for the desktop platform.
198+
PdfViewer?.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Insert(0, new Syncfusion.Maui.PdfViewer.ToolbarItem(fileOpenButton, "FileOpenButton"));
199+
#endif
200+
```
201+
202+
To set the tooltip to a newly added toolbar item like the default items in the toolbar, set the tooltip property for the newly added item. For more details about the tooltip, please refer Tooltips in .NET MAUI , refer to below code example.
203+
204+
**C#:**
205+
206+
``` csharp
207+
// Set the tooltip text
208+
ToolTipProperties.SetText(fileOpenButton, "Open File");
209+
```
210+
211+
## Run the App
212+
213+
1. Build and run the application on all platforms.
214+
2. Switch the theme and check the color and tooltip of the newly added item in the PdfViewer.
215+
216+
217+
218+
219+

0 commit comments

Comments
 (0)