wpf itemscontrol datatemplate margin

时间:2015-08-20 22:41:10

标签: wpf datatemplate itemtemplate

不要介意左右侧边栏,它们只是暂时的,直到我做好了。

正如您在下面的代码中所看到的,以及Image I' m在数据模板中列出我的所有艺术家(来自observablecollection)。

我的问题是:如何制作它,以便在调整gui大小时图像变大,或者添加更多边距。因为现在,在右手边没有空间(我想要的)或太多的空间。 我知道为什么会发生这种情况,新项目不够大,无法添加,所以它会在下一行添加。但我真的不知道如何在我的代码中解决这个问题。

<ItemsControl ItemsSource="{Binding}">
        <ItemsControl.DataContext>
            <CollectionViewSource Source="{Binding DataContext.Artists, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"/>
        </ItemsControl.DataContext>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!--<v:SingleArtistUC Artist="{Binding}" Background="{StaticResource color_bgelements}"/>-->
                <Grid Width="120" Margin="10" Background="{StaticResource color_bgelements}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="120"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Button Command="{Binding DataContext.PlayArtistCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}" Grid.Column="1" Style="{StaticResource ArtistButtonImage}">
                        <ContentControl>
                            <Grid>
                                <Image Source="{Binding Image, Converter={StaticResource ImageByteConv}}" Height="120" Width="120" Stretch="UniformToFill"/>
                                <Image Source="..\Resources\Images\noimage.png" Stretch="UniformToFill" Style="{StaticResource ArtistButtonImageHover}"/>
                            </Grid>
                        </ContentControl>
                    </Button>

                    <!--<Image Source="..\Resources\Images\noimage.png" Height="120" Width="120" Grid.Row="0" Grid.Column="0" Stretch="UniformToFill"/>-->
                    <Grid Grid.Row="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="60"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <!--<TextBlock Text="{Binding Artist.ArtistName, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" TextWrapping="Wrap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="0" Margin="5" FontSize="12" TextAlignment="Center"/>-->
                        <!--<TextBlock Text="ik wil graag twee lijntjes tekst" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="0" Margin="0,10,0,5" FontSize="12" TextAlignment="Center"/>-->

                        <Button Command="{Binding DataContext.ViewArtistDetailCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}" Background="{StaticResource color_bgbutton}" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="0,10,0,5" Grid.Row="0">
                            <Button.Template>
                                <ControlTemplate TargetType="Button">
                                    <ContentPresenter />
                                </ControlTemplate>
                            </Button.Template>
                            <TextBlock Text="{Binding ArtistName}" Style="{StaticResource TextInfo}" TextAlignment="Center"/>
                        </Button>
                        <!-- <Button Command="{Binding CMDPlayArtist, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Tag="{Binding Artist.ID, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Content="Play" Grid.Column="1" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,5,0,5" Style="{StaticResource TransButton}"/>-->
                    </Grid>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

这里应该如何

How it should be

调整错误比例时的情况

when resizing

0 个答案:

没有答案