التمرير المحتوى داخل الحدود مع CornerRadius

Question

أنا أبحث عن مساعدة مع WPF المشكلة كنت اتصارع مع لفترة من الوقت.لقد نصب علامة التبويب عرض, نقل علامات التبويب على اليسار وعرضها عموديا.هذه علامات الجلوس داخل الحدود مع زوايا مدورة في أعلى و أسفل اليسار.

عادي التبويب http://gallery.me.com/theplatz/100006/TabGood.png?derivative=medium&source=web.png&type=medium&ver=12464623560001

أنا الوقوع في مشكلة عندما يتم تبويب تمريره.بدلا من زوايا مدورة لقطة تمريره المحتوى, المحتوى يركب في الواقع على أعلى من الزوايا ، كما يظهر هنا:

تداخل التبويب http://gallery.me.com/theplatz/100006/TabBad/web.png?ver=12464623500001

هنا XAML:

<Style x:Key="SidebarTabControl" TargetType="TabControl">
    <Setter Property="Background" Value="#FFC6D3DE" />
    <Setter Property="Padding" Value="0,20,0,0" />
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200" MinWidth="150" MaxWidth="400" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                <Border
                    CornerRadius="10,0,0,10"
                    Background="{TemplateBinding Background}">
                    <ScrollViewer Grid.Column="0"
                        VerticalScrollBarVisibility="Auto"
                        HorizontalScrollBarVisibility="Disabled"
                        ClipToBounds="True">
                        <Border Padding="{TemplateBinding Padding}">        
                        <TabPanel
                            IsItemsHost="True"
                            KeyboardNavigation.TabIndex="1"
                            Background="Transparent">
                        </TabPanel>
                        </Border>
                    </ScrollViewer>
                </Border>

                <ContentPresenter
                    Grid.Column="1"
                    Margin="0"
                    ContentSource="SelectedContent" />

                <GridSplitter Grid.Column="0"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Stretch"
                  Background="{StaticResource SplitterBrush}" 
                  ShowsPreview="True"
                  Width="1" />
              </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SidebarTab" TargetType="TabItem">
    <Setter Property="Padding" Value="10,12,2,12" />
    <Setter Property="BorderThickness" Value="0,1,0,1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border Padding="{TemplateBinding Padding}" 
                    Name="tab" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    BorderBrush="{StaticResource SidebarTabBorderBrush}">
                    <ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

أي أفكار عن طريقة أستطيع إنجاز ما أبحث عنه ؟ لقد حاولت بعض ZIndex الحيل, ولكن لا يبدو أن العمل.

Answer 1

لإنجاز ما كنت أبحث عنه ، لقد استخدمت وجدت الحل هنا, و تعديلها لتناسب احتياجات بلدي.هنا هو ما انتهى مع:

<Style x:Key="SidebarTabControl" TargetType="TabControl">
    <Setter Property="Background" Value="#FFC6D3DE" />
    <Setter Property="Padding" Value="0,20,0,20" />
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200" MinWidth="150" MaxWidth="400" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

            <!-- Background of the sidebar and our clipping bounds -->
            <Border Grid.Column="0"
                CornerRadius="10,0,0,10"
                    Background="{TemplateBinding Background}"
                Name="mask" />

            <!-- Border necessary so that the top tab does not get clipped prematurely -->
            <Border Grid.Column="0" Background="Transparent">
                <!-- Add opacity mask to clip contents as they're scrolled -->
                <Border.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=mask}"/>
                </Border.OpacityMask>
                <ScrollViewer
                VerticalScrollBarVisibility="Visible"
                HorizontalScrollBarVisibility="Disabled">
                <Border Padding="{TemplateBinding Padding}">        
                        <TabPanel
                        IsItemsHost="True"
                        KeyboardNavigation.TabIndex="1"
                        Background="Transparent">
                    </TabPanel>
                </Border>
                 </ScrollViewer>
            </Border>

            <ContentPresenter
                Grid.Column="1"
                        Margin="0"
                        ContentSource="SelectedContent" />

            <GridSplitter Grid.Column="0"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Stretch"
                        Background="{StaticResource SplitterBrush}" 
                        ShowsPreview="True"
                        Width="1" />
              </Grid>
        </ControlTemplate>
    </Setter.Value>
   </Setter>
</Style>

تحرير: لقد وجدت الحل لقطة مشكلة مع أول تابيتيم.تعشش في ScrollView داخل الثانية الحدود وتطبيق OpacityMask إلى هذه الحدود ، وليس ScrollView إصلاح المشكلة.بالإضافة إلى ذلك, لقد كان بوضوح تعيين خلفية="Transparent" إلى الحدود حيث OpacityMask كان يجري تطبيقها في مقطع لم يحدث قبل الأوان.

Answer 2

هل يمكن تحديد Clip على الحدود مع تقريب هندسة مطابقة مخطط الحدود و.

<Border>
    <Border.Clip>
        <RectangleGeometry Rect="..." RadiusX="..." RadiusY="..."/>
    </Border.Clip>
</Border>

ملاحظة ذلك - كما كنت قد وجدت على الأرجح - سوف ClipToBounds على Border لا تعمل لأن المنطقة الواقعة بين الزاوية وحافة مدورة <م> هو في حدود Border، لذلك سوف لا أن يثقب.