SplitView和云音乐例子

39-SplitView的一个例子讲解SplitViewDemo

相关属性说明

  • CompactPaneLength:菜单栏最小化的宽度
  • DisplayMode:显示模式,当 IsPaneOpen 为 false 的时候是否显示左侧
  • OpenPaneLength:左侧栏正常大小的时候的宽度
  • PaneBackground:左侧栏的背景颜色

40-仿云音乐界面-表格列表GridView

Hub控件切换

<Hub>
    <HubSection>
        <HubSection.ContentTemplate>
            <DataTemplate>
                <Rectangle Fill="Red" Width="300" Height="150"/>
            </DataTemplate>
        </HubSection.ContentTemplate>
    </HubSection>
    <HubSection>
        <HubSection.ContentTemplate>
            <DataTemplate>
                <Rectangle Fill="Green" Width="300" Height="150"/>
            </DataTemplate>
        </HubSection.ContentTemplate>
    </HubSection>
    <HubSection>
        <HubSection.ContentTemplate>
            <DataTemplate>
                <Rectangle Fill="Blue" Width="300" Height="150"/>
            </DataTemplate>
        </HubSection.ContentTemplate>
    </HubSection>
    <HubSection>
        <HubSection.ContentTemplate>
            <DataTemplate>
                <Rectangle Fill="Blue" Width="300" Height="150"/>
            </DataTemplate>
        </HubSection.ContentTemplate>
    </HubSection>
    <HubSection>
        <HubSection.ContentTemplate>
            <DataTemplate>
                <Rectangle Fill="Blue" Width="300" Height="150"/>
            </DataTemplate>
        </HubSection.ContentTemplate>
    </HubSection>
</Hub>Code language: HTML, XML (xml)

GridView表格列表

<GridView Name="myGridView">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="100" Height="100" Fill="{Binding Color}"/>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="BorderBrush" Value="Gray"/>
        </Style>
    </GridView.ItemContainerStyle>
</GridView>Code language: HTML, XML (xml)

给GridView绑定数据源

var items = new List<Item>();
for (int i = 0; i < 9; i++)
{
    items.Add(new Item() { Color = "Green" });
}
myGridView.ItemsSource = items;Code language: PHP (php)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注