Page View - Scroll buttons style

[Fahmi]

Hi,

The scroll buttons of the Page view, are small especially when we put an image( 100 px width ) in the Page view.

How can I make the scroll button occupy more height: all available height ?
Is it also possible to have the left scroll on the left side and the right scroll on the right side rather then both on same side next to each other ?

Please find attached an example: the current status is : only button circled in yellow can be clicked, but I want to have a button in the size of the red rectange.

Thanks in advance,

Fahmi

[Nadya | Tech Support Engineer]

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

[Fahmi]

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

 

[Nadya | Tech Support Engineer]

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

[Fahmi]

Hi Nadya,

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

Have a nice weekend,

Fahmi