none
请问这种界面用什么布局实现比较好? RRS feed

  • 问题

  • 如下,支付宝的界面:

    这个我考虑是要用ListBox的,图标都好办,定一个ListBoxItem的模版就可以了,但关键是红框处的标题不知道怎么搞。

    这个 有点类似于将ListBoxItem进行了分组,请问WPF该如何实现这种布局呢?



    da jia hao!

    2017年9月15日 3:09

全部回复

  • Hi Liubin,

    整个页面放在一个Grid中,这个Grid再分成四行,其中类似标题现实的这两行的高度定为Auto。

    <Grid>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="2*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="3*"/>
                    </Grid.RowDefinitions>

    <TextBlock Margin="10" Text="xxx" />

    <ListBox Grid.Row="1" Margin="10"/>

    <TextBlock Grid.Row="2" Margin="10" Text="xxx" />

    <ListBox Grid.Row="3" Margin="10"/>

    </Grid>

    这样应该可以满足你要的效果,两个放ListBox的行可以根据实际需要改变比例,甚至上面那个的高度也可以改成Auto。同样的每一个控件的Margin也可以自己调整到合适的值。

    Best wishes,
    Lee

    2017年9月15日 5:24
  • 这种做法无法满足要求,因为内容不是固定的,是从数据库读取出来的一组列表。

    还是希望能够用数据绑定的方法去实现。


    da jia hao!

    2017年9月15日 9:12
  • Hi,

    自定义一个用户控件, Grid上边放一个TextBlock, 下面放一个ListBox,然后重写ListBox的ItemPanal, 里边放一个UniformGrid.

    Best Regards,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2017年9月15日 10:33
    版主
  • 我想,还是用TreeView控件比较合适。

    就是相当于只有两层的一个treeview,只不过我需要改变treeviewitem的默认布局为横向。


    da jia hao!

    2017年9月18日 7:00
  • Hi Liubin,

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="2*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="3*"/>
                    </Grid.RowDefinitions>

    把Height="2*"改成Height="Auto"。

    Best wishes,
    Lee

    2017年9月19日 0:50
  • 我参考网上的帖子,找到了这个解决方法,就是用的TreeView控件。做的不是很好,供大家参考:

        <Style x:Key="TreeViewItemHorizontal" TargetType="TreeViewItem">
            <Style.Resources>
                <DropShadowBitmapEffect x:Key="DropShadowEffect" />
            </Style.Resources>
            <Setter Property="Cursor" Value ="Hand"/>
            <Setter Property="FontSize" Value="14"></Setter>
            <Setter Property="Foreground" Value="#335cad"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        <Border BorderThickness="0 0 0 1" BorderBrush="#ccc" Margin="8 8 0 0">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <!--The top row contains the item's content.-->
                                    <RowDefinition Height="Auto" />
                                    <!--The bottom row contains the item's children.-->
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <!-- This Border and ContentPresenter displays the content of the TreeViewItem. -->
                                <Border Name="Bd" BorderBrush="Red" BorderThickness="0">
                                    <ContentPresenter Name="PART_Header" ContentSource="Header" VerticalAlignment="Center" />
                                </Border>
                                <!-- The ItemsPresenter displays the item's children. -->
                                <ItemsPresenter Grid.Row="1"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!--When the item is selected in the TreeView, use the "selected" colors and give it a drop shadow. -->
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Bd" Property="Panel.Background" Value="Yellow" />
                                <Setter TargetName="Bd" Property="Border.BorderBrush" Value="Blue" />
                                <Setter TargetName="Bd" Property="Border.BitmapEffect" Value="{StaticResource DropShadowEffect}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <!-- Make each TreeViewItem show it's children in a horizontal StackPanel. -->
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel IsItemsHost="True" Margin="8 12 0 0" Orientation="Horizontal"  />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <Style x:Key="TreeViewItemHorizontal2" TargetType="TreeViewItem">
            <Style.Resources>
                <DropShadowBitmapEffect x:Key="DropShadowEffect" />
            </Style.Resources>
            <Setter Property="Cursor" Value ="Hand"/>
            <Setter Property="FontSize" Value="14"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        <Grid Margin="2 2 8 2">
                            <Grid.RowDefinitions>
                                <!--The top row contains the item's content.-->
                                <RowDefinition Height="Auto" />
                                <!--The bottom row contains the item's children.-->
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <!-- This Border and ContentPresenter displays the content of the TreeViewItem. -->
                            <Border Name="Bd" Padding="4">
                                <StackPanel>
                                    <TextBlock HorizontalAlignment="Center" Text="{TemplateBinding Tag}" Style="{StaticResource iconfont}" FontSize="32"></TextBlock>
                                    <ContentPresenter Name="PART_Header" ContentSource="Header" VerticalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <!-- The ItemsPresenter displays the item's children. -->
                            <ItemsPresenter Grid.Row="1"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!--When the item is selected in the TreeView, use the "selected" colors and give it a drop shadow. -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="#f1f1f1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <!-- Make each TreeViewItem show it's children in a horizontal StackPanel. -->
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel IsItemsHost="True" Margin="4,6" Orientation="Horizontal"  />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    

    效果图:


    da jia hao!

    2017年9月20日 7:42