如何在wpf中压缩或缩小现有的DataTemplate?

时间:2017-06-28 21:57:34

标签: c# wpf xaml

有没有人知道我是否可以缩小现有的DataTemplate?换句话说,如果我有一个显示一组文本块的DataTemplate,以及大小为300乘300的图像,我可以将该DataTemplate缩小到50x50以创建视图而不修改DataTemplate本身吗?

我有几个DataTemplates用于图中显示的不同元素。我想对这些DataTemplate进行缩小(预览),以便将其作为列表或一组显示给用户。

目前我唯一的选择是手动将其缩小到预览尺寸,但我想知道是否有一个可以用来自动缩小它的功能。

提前致谢。

      <DataTemplate x:Key="sElementLA">
        <Border BorderThickness="1" BorderBrush="{Binding Path=Data.Held, Converter={StaticResource heldConverter}}"
                Background="Transparent" x:Name="ElementIcon"
                Width="Auto" Height="Auto"
                TouchDown="touchDownHandler" TouchUp="touchUpHandler"
                TouchMove ="touchMoveHandler" TouchLeave="touchLeaveHandler"
                Stylus.IsPressAndHoldEnabled="False"
                go:Node.Movable="False"
                go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}" 
                go:Node.LocationSpot="TopLeft"
                go:Part.SelectionAdorned="True"
                go:Part.SelectionElementName="ElementIcon"
                go:Part.SelectionAdornmentTemplate="{StaticResource NodeSelectionAdornmentTemplate}"
                go:Part.Resizable="False"
                go:Part.ResizeElementName="ElementIcon"
                go:Part.ResizeAdornmentTemplate="{StaticResource NodeResizeAdornmentTemplate}"
                go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}"
                go:Part.Rotatable="False"
                go:Part.DragOverSnapEnabled="True"
                go:Part.DragOverSnapCellSpot="TopLeft"
                go:Part.RotateAdornmentTemplate="{StaticResource NodeRotateAdornmentTemplate}">
            <!--Element info-->
            <Grid ShowGridLines="False" Margin="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="170" />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Rectangle Grid.ColumnSpan="3" Width="300" Height="100" RadiusX="12" RadiusY="12" 
                               StrokeThickness="1" Stroke="#5075ba" StrokeLineJoin="Round" StrokeStartLineCap="Round" 
                               StrokeEndLineCap="Round" Fill="#bcc5d2"/>
                <StackPanel Grid.Row="0" Grid.Column="0" Margin="30,0,0,0"  HorizontalAlignment="Right" VerticalAlignment="Center">
                    <TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Medium" 
                               FontSize="16px" Foreground="Black" HorizontalAlignment="Right" FontWeight="DemiBold"/>
                    <TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Regular"
                               FontSize="15px" Foreground="Black" HorizontalAlignment="Right"/>
                    <TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Regular" 
                               FontSize="15px" Foreground="Black" HorizontalAlignment="Right"/>
                </StackPanel>
                <!--Element Node and Icon I-->
                <Grid ShowGridLines="False" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.6*" />
                        <ColumnDefinition Width="0.4*"/>
                    </Grid.ColumnDefinitions>
                    <go:SpotPanel MouseEnter="Node_MouseEnter" MouseLeave="Node_MouseLeave" Grid.Column="0" >
                        <go:NodePanel Sizing="Fixed" go:SpotPanel.Main="True" >
                            <Rectangle Width="85" Height="85" x:Name="CB_VIcon" RadiusX="0" RadiusY="0" Stroke="Transparent" StrokeThickness="0"
                                Cursor="Hand" Fill="{StaticResource CB_V}" SnapsToDevicePixels="True">
                            </Rectangle>
                        </go:NodePanel>
                    </go:SpotPanel>
                    <Grid ShowGridLines="False" Grid.Column="1" VerticalAlignment="Center" Margin="0,0,4,0" HorizontalAlignment="Center">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="CLD" Margin="0,22,4,0" Foreground="DarkGreen" FontSize="16" 
                                       TextWrapping="NoWrap" FontFamily="Comapany Inspira Medium" Height="Auto" 
                                   VerticalAlignment="Center" HorizontalAlignment="Center" />
                        <fa:ImaComapanyAwesome Grid.Row="1" VerticalAlignment="Top" Icon="InfoCircle" Height="30"  
                                         Foreground="#33cccc" Margin="0,0,4,-10" HorizontalAlignment="Center"/>
                    </Grid>
                </Grid>
            </Grid>
        </Border>
    </DataTemplate>

1 个答案:

答案 0 :(得分:0)

最简单的方法是将模板的容器包装在Viewbox中。 Viewbox会扩展其内容以适应自己。

由于DataTemplate通常用于ItemsControl,因此您可能需要使用自定义容器来利用模板周围的视图。