WPF: определение размеров изображений внутри сетки и списка - PullRequest
Новая
       18

WPF: определение размеров изображений внутри сетки и списка

1 голос
/ 25 февраля 2009

У меня есть ListBox с горизонтальной прокруткой, и каждый элемент состоит из сетки из двух строк. Первая строка содержит изображение, а вторая строка - границу, используемую для отображения первого.
(Да, да. Я знаю. Еще одна попытка прикрытия ...)

Мне нужна помощь с подбором изображений. Если я не укажу размер, изображение будет отображаться в полном размере, но я хочу, чтобы оно было ограничено высотой строки сетки. Если размер окна изменяется, размер изображения должен изменяться.

Есть какие-нибудь подсказки?

Обновление:
Теперь я немного изменил код. Прежде всего я удалил ненужный триггер, но важная часть -

  • Отключена вертикальная полоса прокрутки в списке.
  • Удалена высота на coverImage
  • Изменено с layoutTransformation на RenderTransformation
  • Сократить невыбранный элемент вместо масштабирования выбранного элемента.

Это дает мне почти то, что я хочу. Существует разрыв между coverImage и coverReflection, для которого я не могу найти причину. Любые подсказки для этого, может быть, я должен опубликовать новый вопрос ...?

Второе обновление:
Я думаю, что у меня есть решение для пробела отражения до сих пор. Хотя это немного неловко. Я думаю, есть лучшие способы сделать это.

То, что я сделал, это - Я больше не переворачиваю границу, вместо этого я переворачиваю визуальную кисть. - Я добавил TileMode = "Tile" для визуальной кисти

Теперь я не уверен, почему это работает, но это приближается к тому, что я хочу, так что ... 

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    x:Class="UntitledProject1.Window1"
    x:Name="Window"
    Title="Window1"
    Width="801" Height="786">
    <Window.Resources>
        <XmlDataProvider x:Key="dataProvider" XPath="Bilder">
            <x:XData>
                <Bilder xmlns="">
                    <Bilde>75760-1_-8589666289339775808.jpg</Bilde>
                    <Bilde>73255-3_-8589662994232744558.jpg</Bilde>
                    <Bilde>75760-1_-8589666289339775808.jpg</Bilde>
                    <Bilde>73255-3_-8589662994232744558.jpg</Bilde>
                    <Bilde>75760-1_-8589666289339775808.jpg</Bilde>
                    <Bilde>73255-3_-8589662994232744558.jpg</Bilde>
                </Bilder>
            </x:XData>
        </XmlDataProvider>

        <ControlTemplate x:Key="listControlTemplate" TargetType="{x:Type ListBoxItem}">
            <Grid x:Name="listItemGrid">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>      
                <Image x:Name="coverImage" 
                       Source="{Binding Path=InnerText}"  
                       Stretch="Uniform" 
                       HorizontalAlignment="Stretch" 
                       VerticalAlignment="Bottom"  
                       Grid.Row="0" 
                       RenderTransformOrigin="0.5,1">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
                <Border x:Name="coverReflection" 
                        RenderTransformOrigin="0.5,0" 
                        Height="{Binding Path=ActualHeight, ElementName=coverImage, Mode= Default}" 
                        VerticalAlignment="Top" 
                        Grid.Row="1"
                        >
                    <Border.OpacityMask>
                        <LinearGradientBrush EndPoint="0.0,1" StartPoint="0.0,0">
                            <GradientStop Color="#00000000" Offset="0.6"/>
                            <GradientStop Color="#BBFFFFFF" Offset="0"/>
                        </LinearGradientBrush>
                    </Border.OpacityMask>
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Border.RenderTransform>
                    <Border.Background>
                        <VisualBrush Visual="{Binding ElementName=coverImage}" TileMode="Tile">
                            <VisualBrush.Transform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                    <SkewTransform AngleX="0" AngleY="0"/>
                                    <RotateTransform Angle="0"/>
                                    <TranslateTransform X="0" Y="0"/>
                                </TransformGroup>                               
                            </VisualBrush.Transform>
                        </VisualBrush>
                    </Border.Background>
                </Border>               
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">                    
                    <Setter Property="RenderTransform" TargetName="coverImage">
                        <Setter.Value>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="0"/>
                                <TranslateTransform X="0" Y="0"/>
                            </TransformGroup>
                        </Setter.Value>
                    </Setter>                   
                    <Setter Property="RenderTransform" TargetName="coverReflection">
                        <Setter.Value>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="0"/>
                                <TranslateTransform X="0" Y="0"/>
                            </TransformGroup>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style TargetType="{x:Type ListBoxItem}" x:Key="listStyle">
            <Setter Property="Template" Value="{StaticResource listControlTemplate}" />
        </Style>
    </Window.Resources>
    <Window.BindingGroup>
        <BindingGroup/>
    </Window.BindingGroup>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource dataProvider}, XPath=/Bilder/Bilde}">
        <ListBox ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                 ScrollViewer.VerticalScrollBarVisibility="Disabled"
                 ItemsSource="{Binding }" 
                 IsSynchronizedWithCurrentItem="True" 
                 Background="#FF000000"
                 ItemContainerStyle="{StaticResource listStyle}" 
                 VerticalAlignment="Stretch"
                 >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</Window>

1 Ответ

1 голос
/ 26 февраля 2009

Измените стиль для ListBoxItem, включив в него установщик для свойства Height, связанного со свойством ListBox.ActualHeight: 

    <Style TargetType="{x:Type ListBoxItem}" x:Key="listStyle">
        <Setter Property="Template" Value="{StaticResource listControlTemplate}" />
        <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}" />
    </Style>

Это сделает ваши предметы такими же высокими, как и их контейнер. После этого вы можете привязать сетку в шаблоне элемента управления к ActualHeight его шаблонного родителя и изменить размер вашего изображения. Вам придется немного поиграть, чтобы добиться разницы в высоте. Например, вы можете создать в строке над строкой изображения и для выбранного изображения изменить его свойства Row и RowSpan с помощью установщика.

...