Page View - Scroll buttons style

Hello, Fahmi,

According to the attached picture, I suppose that you use RadPageView in StripMode. Could you please confirm that?

The left/right scroll buttons as well as the close button are arranged in one container - StripViewButtonsPanel and this is by design. You can change the button's look and size by assigning a custom image that is suitable for your scenario. The following code snippet demonstrates how you can change the look of the left and right scroll buttons:

RadPageViewStripElement element = this.radPageView1.ViewElement as RadPageViewStripElement;
RadPageViewStripButtonElement leftButton = element.ItemContainer.ButtonsPanel.Children[0] as RadPageViewStripButtonElement;
leftButton.Image = Resources.left_button;
leftButton.MinSize = new Size(50, 50);

RadPageViewStripButtonElement rightButton = element.ItemContainer.ButtonsPanel.Children[1] as RadPageViewStripButtonElement;
rightButton.Image = Resources.right_button;
rightButton.MinSize = new Size(50, 50);

I hope this helps. Should you have any other questions do not hesitate to ask.

Regards,
Nadya
Progress Telerik

Hi Nadya,

Thank you very much, that's exactly what I needed, this has solved my primary functional enquiry.

Just wondering if we can change the style of the page view Menu text( the text below image : change it's font family and back-color and set it's horizontal alignement to middle ) ?

Also can we amend the position of the "Pin page view" to the top rather than the middle.

Thanks for your quick reply :)

Best regards,

Fahmi

Hello, Fahmi,

According to the attached picture, it seems that you want to customize the look of the RadPageViewStripItem that represents the tabs in pageview. Please refer to the following code snippet that demonstrates how you can achieve this:

 Font f = new Font("Segoe UI", 12, FontStyle.Bold);
 RadPageViewStripItem strip = this.radPageView1.ViewElement.Items[2] as RadPageViewStripItem;
 strip.Font = f;
 strip.BackColor = Color.Yellow;
 strip.GradientStyle = GradientStyles.Solid;
 strip.TextImageRelation = TextImageRelation.ImageAboveText;
 strip.ImageLayout = ImageLayout.Center;
 strip.Image = Image.FromFile(@"..//..//settings.png");

 // change the location of the pin button
 RadPageViewStripElement element = this.radPageView1.ViewElement as RadPageViewStripElement;
 element.ShowItemPinButton = true;
 strip.ButtonsPanel.Margin = new Padding(0, -25, 0, 0);

I hope this helps. Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

Hi Nadya,

Thank you for your support, this perfectly answers all my questions.

Have a nice weekend,

Fahmi