none
Bob 请问ScrollBar 控件外观的问题: RRS feed

  • 问题

  • 过去我在写ScrollBarControlTemplate时有Track属性,可是在Metro没了,现在我改如何改写才行呢?下面是我的WPF代码,请bob指教:

        <!--ScrollBar Image-->
        <ImageBrush x:Key="scrollBG" ImageSource="Image/Menu/Bar/bar.png"/>
        <ImageBrush x:Key="thumb" ImageSource="Image/Menu/Bar/adjust1.png"/>
        <ImageBrush x:Key="thumbOver" ImageSource="Image/Menu/Bar/adjust2.png"/>
        <ImageBrush x:Key="thumbPress" ImageSource="Image/Menu/Bar/adjust3.png"/>
        <!--Style Thumb for ScrollBar-->
        <Style x:Key="scrollBarThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollBar}}, Path=MinWidth}"/>
            <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollBar}}, Path=MinWidth}"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Name="Border" Background="{StaticResource thumb}"/>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource thumbOver}" />
                            </Trigger>
                            <Trigger Property="IsDragging" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource thumbPress}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--ControlTemplate Scrollbar-->
        <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
            <Grid >
                <Border Grid.ColumnSpan="3" Background="{StaticResource scrollBG}"/>
                <Track Name="PART_Track" ViewportSize="NaN" IsDirectionReversed="False">
                    <Track.Thumb>
                        <Thumb Style="{StaticResource scrollBarThumbStyle}" MinWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollBar}}, Path=MinWidth}" 
                               ToolTipService.ShowDuration="30000" ToolTipService.ShowOnDisabled ="True">
                        </Thumb>
                    </Track.Thumb>
                </Track>
            </Grid>
        </ControlTemplate>
        
        <!-- Style ScrollBar -->
        <Style x:Key="opacityScrollBar" TargetType="{x:Type ScrollBar}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="Width" Value="Auto"/>
                    <Setter Property="Height" Value="Auto" />
                    <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
                </Trigger>
            </Style.Triggers>
        </Style>
     <ScrollBar Name="scrlOpacity" MinWidth="55" Grid.Row="3" Grid.Column="17" Style="{StaticResource opacityScrollBar}" Orientation="Horizontal" Scroll="ScrollOpacity_Scroll" Minimum="0.01" Maximum="1"/>

    我了解WPF中的触发器部分目前需要用Metro中的VisualStateManager来代替;

    主要是重写这个控件外观时过去的ScrollBar.Track属性现在在Metro中没有了该如何是好呢?谢谢

    请Bob麻烦帮助我能改为Metro中的ScrollBar的ControlTemplate,感谢!!!


    2012年11月14日 3:18

答案

  • Hi,

    WPF中用来修改ProgressBar的PART_Track或者PART_Indicator都已经不存在了,事实上也没必要存在,因为通过Blend可以输出ProgressBar的默认模板,对于各个ProgressBar中的样式以及各种VisualState都可以进行手动的修改。

    通过Blend导出ProgressBar模板方法:

    导出后保存可以在VS中看到模板,你可以按照自己需要修改。


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年11月15日 7:24
    版主
  • Hi,

    Visual Studio可以看到代码之后对代码进行修改,当然也可以在Blend中修改不过那可以直接通过面板来修改你需要的样式。对VisualState的修改我建议还是在VisualStudio中修改代码好了。


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年11月15日 8:25
    版主

全部回复

  • Hi,

    WPF中用来修改ProgressBar的PART_Track或者PART_Indicator都已经不存在了,事实上也没必要存在,因为通过Blend可以输出ProgressBar的默认模板,对于各个ProgressBar中的样式以及各种VisualState都可以进行手动的修改。

    通过Blend导出ProgressBar模板方法:

    导出后保存可以在VS中看到模板,你可以按照自己需要修改。


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年11月15日 7:24
    版主
  • 嗯,以前不使用Blend,现在该学习学习了;可是使用Blend创建保存出的模板的可视状态蛮复杂的

    比如:<VisualState x:Name="Indeterminate">可是状态就有很多关键帧动画;

    在Blend中对于VisualState可以进行手动的修改;请问在哪里啊?我一下子没找到


    2012年11月15日 8:18
  • Hi,

    Visual Studio可以看到代码之后对代码进行修改,当然也可以在Blend中修改不过那可以直接通过面板来修改你需要的样式。对VisualState的修改我建议还是在VisualStudio中修改代码好了。


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年11月15日 8:25
    版主
  • 谢谢啦,我已经刚刚尝试过自己修改过了,3Q;可能各种控件的触发状态与数据绑定我习惯用代码写了;

    谢谢

    2012年11月15日 8:47