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

Page View - Scroll buttons style

4 Answers 22 Views
PageView
This is a migrated thread and some comments may be shown as answers.
Fahmi
Top achievements
Rank 1
Veteran
Fahmi asked on 28 Sep 2020, 10:43 PM

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

4 Answers, 1 is accepted

Sort by
0
Nadya
Telerik team
answered on 29 Sep 2020, 02:39 PM

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

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
Fahmi
Top achievements
Rank 1
Veteran
answered on 29 Sep 2020, 07:33 PM

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

 

0
Nadya
Telerik team
answered on 02 Oct 2020, 02:11 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Fahmi
Top achievements
Rank 1
Veteran
answered on 02 Oct 2020, 08:14 PM

Hi Nadya,

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

Have a nice weekend,

Fahmi

Tags
PageView
Asked by
Fahmi
Top achievements
Rank 1
Veteran
Answers by
Nadya
Telerik team
Fahmi
Top achievements
Rank 1
Veteran
Share this question
or