Microsoft Surface LibraryView具有垂直滚动效果和一列（垂直条） [英] Microsoft Surface LibraryView with vertical scroll effect and one column (vertical bar)

问题描述

hi，

我正在开发Surface Application并在LibraryContainer中使用表面LibraryView控件。

$
我想要的只是在LibraryView中垂直滚动效果而不是水平。



我到目前为止所做的是..我没有设置行=没有图像，所以我在一列中得到图像，我的意思是垂直而不是水平。但是它会自动调整高度而且我没有得到任何滚动，即使我减小了宽度并增加了高度但仍然只有水平滚动，我不会得到任何滚动。



i也没有表达混合。所以和VS 2010一起工作¥b $ b $
请帮我这个。



数据模板 - 我使用的确切从代码隐藏绑定时的6个图像。图像宽度= 334和高度= 213.



< DataTemplate x：Key =" ContainerItemTemplate">

   &NBSP;&NBSP;&NBSP;&NBSP;&NBSP; < Image Source =" {Binding}" MaxWidth = QUOT; 334" MinWidth = QUOT; 334"宽度= QUOT; 334"高度= QUOT; 213"了minHeight = QUOT; 213" MaxHeight = QUOT; 213" />
$
    < / DataTemplate>



容器设计



< s：LibraryContainer x：Name =" MyLibraryContainer" b
        宽度= QUOT; 380"&NBSP;高度= QUOT;汽车"&NBSP; &NBSP;

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; ScrollViewer.Horizo​​ntalScrollBarVisibility = QUOT;禁用" SelectiveScrollingGrid.SelectiveScrollingOrientation = QUOT;这两种"
ScrollViewer.VerticalScrollBarVisibility = QUOT;可见"

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; ViewingMode = QUOT;堆栈" VerticalAlignment =" Top">

        < s：LibraryContainer.StackView>

            < s：StackView

                ItemTemplate =" {StaticResource ContainerItemTemplate}" />
$
        < / s：LibraryContainer.StackView>

        < s：LibraryContainer.BarView>

            < s：BarView

                ItemTemplate =" {StaticResource ContainerItemTemplate}"


                ScrollViewer.Horizo​​ntalScrollBarVisibility = QUOT;禁用" ScrollViewer.VerticalScrollBarVisibility = QUOT;可见"


                SelectiveScrollingGrid.SelectiveScrollingOrientation = QUOT;这两种"行= QUOT; 6英寸>&$ b&b                < S：BarView.ItemContainerStyle>

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; &NBSP;&NBSP; <样式的TargetType = QUOT; ListBoxItem的">

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; < Setter Property =" Background"值= QUOT;透明" />

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; < / Style>&
                < / s：BarView.ItemContainerStyle>

            < / s：BarView>

        < / s：LibraryContainer.BarView>

    < / s：LibraryContainer>
$


请帮助垂直滚动库栏以及图库栏中全高（不收缩）和宽度显示的图像。

i am developing Surface Application and stuck with surface LibraryView control in LibraryContainer.

what i want is simply vertical scrolling effect instead of horizontal in LibraryView.

what i have done so far is.. i have set no of rows = no of images, so i got images in one column, i mean vertical instead of horizontal. but it automatically adjust the height and i don't get any scroll,

even if i have reduced width and increased height but still got horizontal scroll only.

i don't have expression blend also. so working with VS 2010

please help me on this.

data template - i am using exact 6 images while binding from code-behind. image width = 334 and height = 213.

<DataTemplate x:Key="ContainerItemTemplate">
        <Image Source="{Binding }" MaxWidth="334" MinWidth="334" Width="334" Height="213" MinHeight="213" MaxHeight="213" />
    </DataTemplate>

container design

<s:LibraryContainer x:Name="MyLibraryContainer"
         Width="380"  Height="auto"   
                        ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectiveScrollingGrid.SelectiveScrollingOrientation="Both" ScrollViewer.VerticalScrollBarVisibility="Visible"
                        ViewingMode="Stack" VerticalAlignment="Top">
        <s:LibraryContainer.StackView>
            <s:StackView
                ItemTemplate="{StaticResource ContainerItemTemplate}" />
        </s:LibraryContainer.StackView>
        <s:LibraryContainer.BarView >
            <s:BarView
                ItemTemplate="{StaticResource ContainerItemTemplate}"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible"
                SelectiveScrollingGrid.SelectiveScrollingOrientation="Both" Rows="6" >
                <s:BarView.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Background" Value="Transparent" />
                    </Style>
                </s:BarView.ItemContainerStyle>
            </s:BarView>
        </s:LibraryContainer.BarView>
    </s:LibraryContainer>

please help to get vertically scroll library bar and also images displayed in full height(not shrink) and width in library bar.

推荐答案

您好，

对于Vertical LibraryBar您可以这样定义ItemsPanel属性，如下所示：

For the Vertical LibraryBar you can do it defining the ItemsPanel property, like this:

<s:LibraryBar Rows="1" >
	<s:LibraryBarItem>
		(...)
	</s:LibraryBarItem>
	<s:LibraryBar.ItemsPanel>
		<ItemsPanelTemplate>
			<StackPanel Orientation="Vertical" />
		</ItemsPanelTemplate>
	</s:LibraryBar.ItemsPanel>
</s:LibraryBar>

我更喜欢使用SurfaceListBox，虽然你必须在LibraryContainer上默认实现一些方法，我认为它更容易，有更多选项可以自定义。

I prefer using the SurfaceListBox, although you have to implement some methods that are already by default on the LibraryContainer, in my opinion it's easier and has more options that you can customize.

对于全高图像，尝试在网格中定义限制，这样，如果您想在之后将图像拖放到ScatterView上，则没有设置限制。在DataTemplate中执行以下操作：

As for the images in full height, try to define the restrictions in a grid, that way if you want to drag and drop the images on a ScatterView afterwards, you have no set restrictions. In the DataTemplate do something like this:

<DataTemplate x:Key="ContainerItemTemplate">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Height="300" />	
		</Grid.ColumnDefinitions>
		<Image Grid.Column="0" Source="{Binding}" />
	</Grid>
</DataTemplate>

如果有帮助，请标记为答案。

Please mark as answer if it helps.

这篇关于Microsoft Surface LibraryView具有垂直滚动效果和一列（垂直条）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！