RadPageView appearance settings

2 Answers 621 Views
PageView
Robert
Top achievements
Rank 1
Robert asked on 06 May 2021, 03:01 PM | edited on 07 May 2021, 06:28 AM

In the included screenshot I see the white borders (or background color) on the sides indicated by the red arrows. How can I make these borders disappear? 

In the screenshot it is also visible that on the right side a lighter colored area appears, this color is the same is the color used to highlight the selected radpageviewpage (in the screenshot RadPageViewPage8). How can I prevent this from happening? To clarify I included a second screenshot which shows how I would like to see it.

I'm using Telerik.WinControls, Version=2018.3.1016.40.

The code below shows a form with can be used to reproduce the page views shown above (without the images and no toolbar):
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()>
Partial Class Form1
    Inherits System.Windows.Forms.Form

    'Form overrides dispose to clean up the component list.
    <System.Diagnostics.DebuggerNonUserCode()>
    Protected Overrides Sub Dispose(ByVal disposing As Boolean)
        Try
            If disposing AndAlso components IsNot Nothing Then
                components.Dispose()
            End If
        Finally
            MyBase.Dispose(disposing)
        End Try
    End Sub

    'Required by the Windows Form Designer
    Private components As System.ComponentModel.IContainer

    'NOTE: The following procedure is required by the Windows Form Designer
    'It can be modified using the Windows Form Designer.  
    'Do not modify it using the code editor.
    <System.Diagnostics.DebuggerStepThrough()>
    Private Sub InitializeComponent()
        Me.RadPageView1 = New Telerik.WinControls.UI.RadPageView()
        Me.RadPageViewPage1 = New Telerik.WinControls.UI.RadPageViewPage()
        Me.RadPageView3 = New Telerik.WinControls.UI.RadPageView()
        Me.RadPageViewPage10 = New Telerik.WinControls.UI.RadPageViewPage()
        Me.RadPageViewPage11 = New Telerik.WinControls.UI.RadPageViewPage()
        Me.RadPageViewPage2 = New Telerik.WinControls.UI.RadPageViewPage()
        Me.RadPageView2 = New Telerik.WinControls.UI.RadPageView()
        Me.RadPageViewPage6 = New Telerik.WinControls.UI.RadPageViewPage()
        Me.RadPageViewPage7 = New Telerik.WinControls.UI.RadPageViewPage()
        CType(Me.RadPageView1, System.ComponentModel.ISupportInitialize).BeginInit()
        Me.RadPageView1.SuspendLayout()
        Me.RadPageViewPage1.SuspendLayout()
        CType(Me.RadPageView3, System.ComponentModel.ISupportInitialize).BeginInit()
        Me.RadPageView3.SuspendLayout()
        Me.RadPageViewPage2.SuspendLayout()
        CType(Me.RadPageView2, System.ComponentModel.ISupportInitialize).BeginInit()
        Me.RadPageView2.SuspendLayout()
        Me.SuspendLayout()
        '
        'RadPageView1
        '
        Me.RadPageView1.Controls.Add(Me.RadPageViewPage1)
        Me.RadPageView1.Controls.Add(Me.RadPageViewPage2)
        Me.RadPageView1.Dock = System.Windows.Forms.DockStyle.Left
        Me.RadPageView1.ItemSizeMode = CType((Telerik.WinControls.UI.PageViewItemSizeMode.EqualWidth Or Telerik.WinControls.UI.PageViewItemSizeMode.EqualHeight), Telerik.WinControls.UI.PageViewItemSizeMode)
        Me.RadPageView1.Location = New System.Drawing.Point(0, 0)
        Me.RadPageView1.Name = "RadPageView1"
        Me.RadPageView1.PageBackColor = System.Drawing.Color.Transparent
        Me.RadPageView1.SelectedPage = Me.RadPageViewPage1
        Me.RadPageView1.Size = New System.Drawing.Size(182, 571)
        Me.RadPageView1.TabIndex = 3
        Me.RadPageView1.ViewMode = Telerik.WinControls.UI.PageViewMode.Stack
        CType(Me.RadPageView1.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStackElement).ItemSpacing = 1
        '
        'RadPageViewPage1
        '
        Me.RadPageViewPage1.BackColor = System.Drawing.Color.Maroon
        Me.RadPageViewPage1.Controls.Add(Me.RadPageView3)
        Me.RadPageViewPage1.ForeColor = System.Drawing.SystemColors.ActiveCaptionText
        Me.RadPageViewPage1.ImageAlignment = System.Drawing.ContentAlignment.TopCenter
        Me.RadPageViewPage1.ItemSize = New System.Drawing.SizeF(182.0!, 32.0!)
        Me.RadPageViewPage1.Location = New System.Drawing.Point(5, 29)
        Me.RadPageViewPage1.Name = "RadPageViewPage1"
        Me.RadPageViewPage1.Size = New System.Drawing.Size(172, 476)
        Me.RadPageViewPage1.Text = "RadPageViewPage1"
        Me.RadPageViewPage1.TextAlignment = System.Drawing.ContentAlignment.MiddleCenter
        Me.RadPageViewPage1.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText
        '
        'RadPageView3
        '
        Me.RadPageView3.Controls.Add(Me.RadPageViewPage10)
        Me.RadPageView3.Controls.Add(Me.RadPageViewPage11)
        Me.RadPageView3.Dock = System.Windows.Forms.DockStyle.Fill
        Me.RadPageView3.Location = New System.Drawing.Point(0, 0)
        Me.RadPageView3.Name = "RadPageView3"
        Me.RadPageView3.PageBackColor = System.Drawing.Color.Transparent
        Me.RadPageView3.SelectedPage = Me.RadPageViewPage10
        Me.RadPageView3.Size = New System.Drawing.Size(172, 476)
        Me.RadPageView3.TabIndex = 0
        CType(Me.RadPageView3.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).StripButtons = Telerik.WinControls.UI.StripViewButtons.None
        CType(Me.RadPageView3.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).StripAlignment = Telerik.WinControls.UI.StripViewAlignment.Left
        CType(Me.RadPageView3.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).ItemContentOrientation = Telerik.WinControls.UI.PageViewContentOrientation.Horizontal
        '
        'RadPageViewPage10
        '
        Me.RadPageViewPage10.ImageAlignment = System.Drawing.ContentAlignment.TopCenter
        Me.RadPageViewPage10.ItemSize = New System.Drawing.SizeF(121.0!, 28.0!)
        Me.RadPageViewPage10.Location = New System.Drawing.Point(130, 10)
        Me.RadPageViewPage10.Name = "RadPageViewPage10"
        Me.RadPageViewPage10.Size = New System.Drawing.Size(31, 455)
        Me.RadPageViewPage10.Text = "RadPageViewPage10"
        Me.RadPageViewPage10.TextAlignment = System.Drawing.ContentAlignment.MiddleCenter
        Me.RadPageViewPage10.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText
        '
        'RadPageViewPage11
        '
        Me.RadPageViewPage11.ItemSize = New System.Drawing.SizeF(121.0!, 28.0!)
        Me.RadPageViewPage11.Location = New System.Drawing.Point(130, 10)
        Me.RadPageViewPage11.Name = "RadPageViewPage11"
        Me.RadPageViewPage11.Size = New System.Drawing.Size(0, 297)
        Me.RadPageViewPage11.Text = "RadPageViewPage11"
        '
        'RadPageViewPage2
        '
        Me.RadPageViewPage2.Controls.Add(Me.RadPageView2)
        Me.RadPageViewPage2.ImageAlignment = System.Drawing.ContentAlignment.TopCenter
        Me.RadPageViewPage2.ItemSize = New System.Drawing.SizeF(182.0!, 32.0!)
        Me.RadPageViewPage2.Location = New System.Drawing.Point(5, 29)
        Me.RadPageViewPage2.Name = "RadPageViewPage2"
        Me.RadPageViewPage2.Size = New System.Drawing.Size(172, 476)
        Me.RadPageViewPage2.Text = "RadPageViewPage2"
        Me.RadPageViewPage2.TextAlignment = System.Drawing.ContentAlignment.MiddleCenter
        Me.RadPageViewPage2.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText
        '
        'RadPageView2
        '
        Me.RadPageView2.Controls.Add(Me.RadPageViewPage6)
        Me.RadPageView2.Controls.Add(Me.RadPageViewPage7)
        Me.RadPageView2.Dock = System.Windows.Forms.DockStyle.Fill
        Me.RadPageView2.Location = New System.Drawing.Point(0, 0)
        Me.RadPageView2.Name = "RadPageView2"
        Me.RadPageView2.SelectedPage = Me.RadPageViewPage6
        Me.RadPageView2.Size = New System.Drawing.Size(172, 476)
        Me.RadPageView2.TabIndex = 1
        CType(Me.RadPageView2.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).StripButtons = Telerik.WinControls.UI.StripViewButtons.None
        CType(Me.RadPageView2.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).StripAlignment = Telerik.WinControls.UI.StripViewAlignment.Left
        CType(Me.RadPageView2.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).ItemContentOrientation = Telerik.WinControls.UI.PageViewContentOrientation.Horizontal
        '
        'RadPageViewPage6
        '
        Me.RadPageViewPage6.ImageAlignment = System.Drawing.ContentAlignment.TopCenter
        Me.RadPageViewPage6.Location = New System.Drawing.Point(124, 10)
        Me.RadPageViewPage6.Name = "RadPageViewPage6"
        Me.RadPageViewPage6.Size = New System.Drawing.Size(22, 245)
        Me.RadPageViewPage6.Text = "RadPageViewPage6"
        Me.RadPageViewPage6.TextAlignment = System.Drawing.ContentAlignment.MiddleCenter
        Me.RadPageViewPage6.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText
        '
        'RadPageViewPage7
        '
        Me.RadPageViewPage7.ImageAlignment = System.Drawing.ContentAlignment.TopCenter
        Me.RadPageViewPage7.Location = New System.Drawing.Point(124, 10)
        Me.RadPageViewPage7.Name = "RadPageViewPage7"
        Me.RadPageViewPage7.Size = New System.Drawing.Size(26, 297)
        Me.RadPageViewPage7.Text = "RadPageViewPage7"
        Me.RadPageViewPage7.TextAlignment = System.Drawing.ContentAlignment.MiddleCenter
        Me.RadPageViewPage7.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText
        '
        'Form1
        '
        Me.AutoScaleDimensions = New System.Drawing.SizeF(6.0!, 13.0!)
        Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font
        Me.ClientSize = New System.Drawing.Size(869, 571)
        Me.Controls.Add(Me.RadPageView1)
        Me.Name = "Form1"
        Me.Text = "Form1"
        CType(Me.RadPageView1, System.ComponentModel.ISupportInitialize).EndInit()
        Me.RadPageView1.ResumeLayout(False)
        Me.RadPageViewPage1.ResumeLayout(False)
        CType(Me.RadPageView3, System.ComponentModel.ISupportInitialize).EndInit()
        Me.RadPageView3.ResumeLayout(False)
        Me.RadPageViewPage2.ResumeLayout(False)
        CType(Me.RadPageView2, System.ComponentModel.ISupportInitialize).EndInit()
        Me.RadPageView2.ResumeLayout(False)
        Me.ResumeLayout(False)

    End Sub
    Friend WithEvents RadPageView1 As Telerik.WinControls.UI.RadPageView
    Friend WithEvents RadPageViewPage1 As Telerik.WinControls.UI.RadPageViewPage
    Friend WithEvents RadPageViewPage2 As Telerik.WinControls.UI.RadPageViewPage
    Friend WithEvents RadPageView2 As Telerik.WinControls.UI.RadPageView
    Friend WithEvents RadPageViewPage6 As Telerik.WinControls.UI.RadPageViewPage
    Friend WithEvents RadPageViewPage7 As Telerik.WinControls.UI.RadPageViewPage
    Friend WithEvents RadPageView3 As Telerik.WinControls.UI.RadPageView
    Friend WithEvents RadPageViewPage10 As Telerik.WinControls.UI.RadPageViewPage
    Friend WithEvents RadPageViewPage11 As Telerik.WinControls.UI.RadPageViewPage
End Class

2 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 07 May 2021, 07:19 AM
Hello, Robert,

You can eliminate the light border around RadPageView by resetting the ContentArea.Padding property:
 Me.RadPageView1.ViewElement.ContentArea.Padding = New Padding(0)

According to the provided screenshots, RadPageViewPage8 is the currently selected page. That is why its tab color is the same as the content area (indicated with yellow). This is by design. It seems that you want to hide the content area in RadPageView. This can be achieved by using the following code snippet:

    Me.RadPageView3.ViewElement.ContentArea.Visibility = Telerik.WinControls.ElementVisibility.Collapsed 

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Robert
Top achievements
Rank 1
commented on 07 May 2021, 02:48 PM

The ContentArea.Padding property setting answered my question related to the light border. The ContentArea.Visibility setting didn't work for me. Is it possible to disable the highlighting of the currently selected page completely?
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 10 May 2021, 06:59 AM

Hello, Robert,

The SelectedPageChanging event allows you to cancel selecting a new page in RadPageView. If the RadPageView.SelectedPage is initially set to Nothing, no page will be selected and the user wouldn't be able to select any page: 
    Private Sub RadForm1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.RadPageView3.SelectedPage = Nothing
        AddHandler Me.RadPageView3.SelectedPageChanging, AddressOf RadPageView3_SelectedPageChanging
    End Sub

    Private Sub RadPageView3_SelectedPageChanging(sender As Object, e As RadPageViewCancelEventArgs)
        e.Cancel = True
    End Sub

Note that you can also customize the default theme in Visual Style Builder if you need to disable any other coloring in RadPageView. A sample approach for customizing the theme is demonstrated here: https://docs.telerik.com/devtools/winforms/knowledge-base/customize-a-theme 

As to the content area, I have attached my sample project for your reference. Please give it a try and see how it works.

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
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/.

Tags
PageView
Asked by
Robert
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or