Member 11859517 Ответов: 1

Как динамически изменять размер элемента списка в C# WPF?

привет ребята,

Я создал элемент управления ListBox в WPF mainindow, который будет отображать изображения тип плитки, который идеально подходит.
теперь у меня есть еще одно окно,которое будет содержать 3 варианта, такие как small(160Height, 100 Width), medium(220H,140W), large(280H, 180H) в качестве переключателя и кнопка apply,
как только я выберу средний и нажму кнопку Применить, то мой размер элемента списка должен быть 220H, 140W. например, для малого вопог большого, как это сделать?
Ниже приведен мой список.

<ListBox l:ListBoxSelector.Enabled="{Binding ElementName=UC,Path=MouseSelection,UpdateSourceTrigger=PropertyChanged}"

         FocusVisualStyle="{x:Null}" IsEnabled="{Binding ElementName=LoadingAdorner,Path=IsAdornerVisible,
         Converter={StaticResource BoolReverse},UpdateSourceTrigger=PropertyChanged}" 

         ItemsSource="{Binding ElementName=UC,Path=ThumbImages,IsAsync=True,UpdateSourceTrigger=PropertyChanged}"

         x:FieldModifier="public" Name="listBoxComposerThumbs" BorderBrush="Transparent"

         Background="{DynamicResource ThumbnailBackgroundColor}" Margin="5,48,5,10" Drop="listBoxComposerThumbs_Drop" 

         AllowDrop="True" SelectionMode="Extended" SelectionChanged="OnThumbViewSelectChanged"

         ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" 

         ScrollViewer.CanContentScroll="True" MouseDoubleClick="ThumbView_MouseDoubleClick"

         MouseRightButtonDown="ThumbView_MouseLeftBtnDown" MouseLeftButtonDown="ThumbView_MouseLeftBtnDown" 

         RenderOptions.BitmapScalingMode="HighQuality" RenderOptions.EdgeMode="Aliased" 

         LayoutUpdated="listBoxComposerThumbs_LayoutUpdated" KeyDown="listBoxComposerThumbs_KeyDown">
    <ListBox.Style>
        <Style TargetType="ListBox">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <EventSetter Event="ContextMenuOpening" Handler="listBoxComposerWorkSpace_ContextMenu"/>
        </Style>
    </ListBox.Style>
    <ListBox.ContextMenu>
        <ContextMenu Style="{x:Null}" >
            <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.CutMenu}" Foreground="Black" TextBlock.Foreground="Black" InputGestureText="Ctrl+X" IsEnabled="False" FontFamily="Segoe UI Regular" FontSize="12"/>
            <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.CopyMenu}"  Foreground="Black" TextBlock.Foreground="Black" InputGestureText="Ctrl+C" IsEnabled="False" FontFamily="Segoe UI Regular" FontSize="12"/>
            <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.PasteMenu}" Foreground="Black" TextBlock.Foreground="Black" Tag="P" Click="PasteBtn_Click"  InputGestureText="Ctrl+V" FontFamily="Segoe UI Regular" FontSize="12"/>
            <Separator/>
            <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.DeleteText}" Foreground="Black" TextBlock.Foreground="Black" InputGestureText="Del" IsEnabled="False" FontFamily="Segoe UI Regular" FontSize="12"/>
            <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.SelectAllMenu}" Foreground="Black" TextBlock.Foreground="Black" Tag="S" Click="SelectAllBtn_Click"  InputGestureText="Ctrl+A" FontFamily="Segoe UI Regular" FontSize="12"/>
            <Separator/>
            <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.InsertMenu}" Foreground="Black" TextBlock.Foreground="Black" Tag="I" Click="InsertBlankPageBtn_Click" InputGestureText="Ctrl+B" FontFamily="Segoe UI Regular" FontSize="12"/>
        </ContextMenu>
    </ListBox.ContextMenu>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid SizeChanged="scroll_SizeChanged" Columns="{Binding ElementName=UC, Path=TileColumns}" 

                         FocusVisualStyle="{x:Null}" VerticalAlignment="Top"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Border>
                    <Border.Effect>
                        <DropShadowEffect BlurRadius="20" ShadowDepth="0" Opacity="0.8"   Color="Black"/>
                    </Border.Effect>
                    <Grid Background="White" HorizontalAlignment="Left">
                        <Grid x:Name="ListItemPanel" >
                            <Grid.Style>
                                <Style TargetType="Grid">
                                    <EventSetter Event="ContextMenuOpening" Handler="listBoxComposerThumbs_ContextMenu"/>
                                </Style>
                            </Grid.Style>
                            <Grid.ContextMenu>
                                <ContextMenu Style="{x:Null}" >
                                    <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.CutMenu}" Command="Cut" CommandTarget="{Binding Path=PlacementTarget,RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" InputGestureText="Ctrl+X" FontFamily="Segoe UI Regular" FontSize="12"/>
                                    <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.CopyMenu}" Command="Copy" CommandTarget="{Binding Path=PlacementTarget,RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" InputGestureText="Ctrl+C" FontFamily="Segoe UI Regular" FontSize="12"/>
                                    <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.PasteMenu}" Tag="P" Command="Paste" CommandTarget="{Binding Path=PlacementTarget,RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" InputGestureText="Ctrl+V" FontFamily="Segoe UI Regular" FontSize="12"/>
                                    <Separator/>
                                    <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.DeleteText}" Command="Delete" CommandTarget="{Binding Path=PlacementTarget,RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" InputGestureText="Del" FontFamily="Segoe UI Regular" FontSize="12"/>
                                    <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.SelectAllMenu}" Command="SelectAll" CommandTarget="{Binding Path=PlacementTarget,RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" InputGestureText="Ctrl+A" FontFamily="Segoe UI Regular" FontSize="12"/>
                                    <Separator/>
                                    <MenuItem Style="{x:Null}" Header="{x:Static culture:Resources.InsertMenu}" Command="Pause" CommandTarget="{Binding Path=PlacementTarget,RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" InputGestureText="Ctrl+B" FontFamily="Segoe UI Regular" FontSize="12"/>
                                    <Separator/>
                                    <MenuItem Style="{StaticResource MenuSelectPaper}" Header="{x:Static culture:Resources.SelectPSMenu}" Tag="{Binding BinNo,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="SelectPaperMenu" FontFamily="Segoe UI Regular" FontSize="12"/>
                                </ContextMenu>
                            </Grid.ContextMenu>

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Rectangle x:Name="HeaderRect" Grid.Row="0" Fill="Red" Height="6"  

                                       Visibility="{Binding Path=BHdr,Converter={StaticResource BoolVisble},UpdateSourceTrigger=PropertyChanged}"/>
                            <!--<Image Grid.Row="1" Source="{Binding ThumbnailImage}" Stretch="Fill"  Height="{Binding Path=ImageHeight,Converter={StaticResource HeightConvert},ConverterParameter=260,UpdateSourceTrigger=PropertyChanged}"  Width="{Binding Path=ImageWidth,Converter={StaticResource WidthConvert},ConverterParameter=260,UpdateSourceTrigger=PropertyChanged}">-->
                            <Image Grid.Row="1" Source="{Binding ThumbnailImage}" Stretch="Fill"  Height="{Binding Path=RectHeight,UpdateSourceTrigger=PropertyChanged}" 

                                   Width="{Binding Path=RectWidth,UpdateSourceTrigger=PropertyChanged}">
                                    <Image.LayoutTransform>
                                    <RotateTransform Angle="{Binding RotateAngle,UpdateSourceTrigger=PropertyChanged}"/>
                                </Image.LayoutTransform>
                            </Image>
                            <Rectangle x:Name="FooterRect" Fill="Red" Grid.Row="2" Height="3"  Visibility="{Binding Path=BFtr,Converter={StaticResource BoolVisble},UpdateSourceTrigger=PropertyChanged}"/>
                            <TextBlock Text="{Binding BinNo}" Visibility="Collapsed"/>
                        </Grid>
                        
                    </Grid>
                </Border>

                <TextBlock Grid.Row="1" Foreground="{DynamicResource NofilesForegroundColor}" HorizontalAlignment="Center">
                        <Run x:Uid="DisplayPage" Text="{x:Static culture:Resources.DisplayPage}"/>
                         <Run Text="{Binding PageNumber}"/>
                </TextBlock>
            </Grid>
            
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ListBox.Resources>
        <Style TargetType="ListBoxItem">
            <EventSetter Event="PreviewMouseLeftButtonDown" Handler="ListBoxItem_PreviewMouseLeftButtonDown"/>
            <EventSetter Event="PreviewMouseLeftButtonUp" Handler="ListBoxItem_PreviewMouseLeftButtonUp"/>
            <EventSetter Event="Drop" Handler="ListBoxItem_Drop"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="AllowDrop" Value="True"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Setter Property="Margin" Value="10,10,10,0"/>                                    
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Column="0" x:Name="GLeftBd" Visibility="{Binding ElementName=UC,Path=MouseDragVisibility,UpdateSourceTrigger=PropertyChanged}" Drop="GridDrop" DragOver="GridDragOver" DragLeave="GridDragLeave" DragEnter="GridDragEnter" Margin="-40,0,0,0" Background="#19FFFFFF">
                                <Border x:Name="LeftBd" Background="Black" Visibility="Collapsed" CornerRadius="2" Width="2" Margin="0,5,8,15" HorizontalAlignment="Right">
                                    <Border.Effect>
                                        <DropShadowEffect BlurRadius="8" ShadowDepth="0" Opacity="0.8" Color="Black"/>
                                    </Border.Effect>
                                </Border>
                            </Grid>
                            <Grid Grid.Column="1" x:Name="ThumbImageBaseGrid"  HorizontalAlignment="Center" VerticalAlignment="Center">
                                <ContentPresenter x:Name="ThumbContentHost" Margin="3"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <Rectangle x:Name="BackgroundRect" Fill="{x:Null}"  Opacity="0" Margin="0" Stroke="{DynamicResource ContentBorderBackgroundColor}" StrokeThickness="3"/>
                            </Grid>
                            <Grid Grid.Column="2" x:Name="GRightBd" Visibility="{Binding ElementName=UC,Path=MouseDragVisibility,UpdateSourceTrigger=PropertyChanged}" Drop="GridDrop" DragOver="GridDragOver" DragLeave="GridDragLeave" DragEnter="GridDragEnter" Margin="0,0,-40,0" Background="#19FFFFFF">
                                <Border x:Name="RightBd" Background="Black" Visibility="Collapsed" CornerRadius="2" Width="2" Margin="8,5,0,15" HorizontalAlignment="Left">
                                    <Border.Effect>
                                        <DropShadowEffect BlurRadius="8" ShadowDepth="0" Opacity="0.8" Color="Black"/>
                                    </Border.Effect>
                                </Border>
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!--<EventTrigger RoutedEvent="Loaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard  Storyboard="{StaticResource LoadAnimation}"/>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                                <EventTrigger RoutedEvent="Unloaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard Storyboard="{StaticResource UnLoadAnimation}"/>
                                   </EventTrigger.Actions>
                                </EventTrigger>-->
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="BackgroundRect" Property="Opacity" Value="1"/>
                                <!--<Setter TargetName="border" Property="BorderThickness" Value="0"/>
                                     <Setter TargetName="border" Property="BorderBrush" Value="Red"/>-->
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="Selector.IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="BackgroundRect" Property="Opacity" Value="1"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Transparent"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.Resources>
</ListBox>


Что я уже пробовал:

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

Graeme_Grant

Слишком много ненужного кода... У меня голова болит, когда я читаю здесь.

Начните побочный проект и просто используйте абсолютный минимум чтобы решить проблему.

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

1 Ответов

Рейтинг:
6

Graeme_Grant

Я попробую сделать то, что ты хочешь.

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

Во-первых, будучи проектом MVVM, ViewModels (VMs) не могут напрямую ссылаться на объекты пользовательского интерфейса, такие как Windows, однако виртуальные машины могут создавать другие виртуальные машины. Поэтому нам нужен прокси-сервис для запуска окна селектора с помощью ассоциированной виртуальной машины:

public interface IViewModel
{

}

internal interface IWindowService
{
    void ShowWindow(IViewModel viewModel);
}

internal class WindowService : IWindowService
{
    public void ShowWindow(IViewModel viewModel)
        => (new Window
        {
            Content = viewModel,
            SizeToContent = SizeToContent.WidthAndHeight,
            WindowStartupLocation = WindowStartupLocation.CenterScreen
        }).Show();
}

Чтобы это сработало, нам нужно установить DataTemplate в App.XAML:
<Application

    x:Class="WpfListImageSizer.App"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:vm="clr-namespace:WpfListImageSizer"

    xmlns:vw="clr-namespace:WpfListImageSizer"

    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <DataTemplate DataType="{x:Type vm:SizeSelectorViewModel}">
            <vw:SelectorView/>
        </DataTemplate>
    </Application.Resources>
</Application>

DataTemplate связывает SelectorView к SizeSelectorViewModel.
Далее, поскольку мы используем привязку данных, нам необходимо реализовать INotifyPropertyChanged обработчик событий для модели данных и виртуальных машин. Поэтому проще создать базовый класс, который его реализует:
public abstract class ObservableBase : INotifyPropertyChanged
{
    public void Set<TValue>(ref TValue field, TValue newValue, [CallerMemberName] string propertyName = "")
    {
        if (EqualityComparer<TValue>.Default.Equals(field, default(TValue)) || !field.Equals(newValue))
        {
            field = newValue;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public bool IsInDesignMode => DesignerProperties.GetIsInDesignMode(new DependencyObject());
}

Я также добавил следующее: IsInDesignMode в базовый класс. Это используется для предотвращения выполнения конструктором VS (Visual Studio) определенного кода в нашем проекте - в данном случае виртуальных машинах.

Теперь нам нужны наши модели данных - одна для выбора размера изображения, а другая для наших фиктивных данных для тестирования:
public class ImageSizeModel : ObservableBase
{
    private string title;
    public string Title
    {
        get => title;
        set => Set(ref title, value);
    }

    private double width;
    public double Width
    {
        get => width;
        set => Set(ref width, value);
    }

    private double height;
    public double Height
    {
        get => height;
        set => Set(ref height, value);
    }
}

public class PersonModel : ObservableBase
{
    private string firstname;
    public string Firstname
    {
        get => firstname;
        set => Set(ref firstname, value);
    }

    private string lastname;
    public string Lastname
    {
        get => lastname;
        set => Set(ref lastname, value);
    }

    private string photoUrl;
    public string PhotoUrl
    {
        get => photoUrl;
        set => Set(ref photoUrl, value);
    }
}


Сейчас для нашей модели вид. Во - первых, нам нужен селектор VM:
public class SizeSelectorViewModel : ObservableBase, IViewModel
{
    public SizeSelectorViewModel()
    {

    }

    public SizeSelectorViewModel(ObservableCollection<ImageSizeModel> availableSizes, ImageSizeModel model = null)
    {
        Models = availableSizes;
        SelectedModel = model ?? (Models[0]);
    }

    private ImageSizeModel selectedModel;
    public ImageSizeModel SelectedModel
    {
        get => selectedModel;
        set => Set(ref selectedModel, value);
    }

    public ObservableCollection<ImageSizeModel> Models { get; }
        = new ObservableCollection<ImageSizeModel>();
}

И представление для селектора VM:
<UserControl

    x:Class="WpfListImageSizer.SelectorView"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:m="clr-namespace:WpfListImageSizer"

    Height="300" Width="200">

    <UserControl.Resources>
        <DataTemplate DataType="{x:Type m:ImageSizeModel}">
            <TextBlock>
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}{1} W x {2} H - ({0})">
                        <Binding Path="Title" />
                        <Binding Path="Width" />
                        <Binding Path="Height" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding Models}"

                 SelectedItem="{Binding SelectedModel, Mode=TwoWay}"/>
    </Grid>
</UserControl>

А теперь перейдем к виртуальной машине для главного окна:
public class MainViewModel : ObservableBase, IViewModel
{
    public MainViewModel()
    {
        if (IsInDesignMode) return;

        ImageSize = sizes[1];
        selector = new SizeSelectorViewModel(sizes, ImageSize);
        selector.PropertyChanged += Selector_PropertyChanged;

        windowService.ShowWindow(selector);
    }

    private void Selector_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(SizeSelectorViewModel.SelectedModel))
            ImageSize = selector.SelectedModel;
    }

    private SizeSelectorViewModel selector;
    private IWindowService windowService = new WindowService();

    private readonly ObservableCollection<ImageSizeModel> sizes
        = new ObservableCollection<ImageSizeModel>
        {
            new ImageSizeModel{ Width = 100, Height = 160, Title = "Small" },
            new ImageSizeModel{ Width = 140, Height = 220, Title = "Medium" },
            new ImageSizeModel{ Width = 180, Height = 280, Title = "Large" },
        };

    private ImageSizeModel imageSize;
    public ImageSizeModel ImageSize
    {
        get => imageSize;
        set => Set(ref imageSize, value);
    }

    public ObservableCollection<PersonModel> Staff { get; }
    = new ObservableCollection<PersonModel>
    {
        new PersonModel
        {
            Firstname = "Johnny", Lastname = "Appleseed",
            PhotoUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Dunn_Official_Headshot.jpg/220px-Dunn_Official_Headshot.jpg"
        },
        new PersonModel
        {
            Firstname = "Fred", Lastname = "Smith",
            PhotoUrl = "http://vickmark.com/wp-content/uploads/2012/10/headshot-aon-g-web.jpg"
        },
        new PersonModel
        {
            Firstname = "Jose", Lastname = "Cordero",
            PhotoUrl = "http://news.uga.edu/media/images/Jose-Cordero-230x348.jpg"
        },
        new PersonModel
        {
            Firstname = "Rod", Lastname = "Goodman",
            PhotoUrl = "http://www.rodgoodmanphoto.com/img/s/v-3/p1313838186-3.jpg"
        }
    };
}

И само главное окно:
<Window

    x:Class="WpfListImageSizer.MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:vm="clr-namespace:WpfListImageSizer"

    xmlns:m="clr-namespace:WpfListImageSizer"

    Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen">

    <Window.DataContext>
        <vm:MainViewModel/>
    </Window.DataContext>

    <Window.Resources>
        <Style x:Key="NameStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="FontSize" Value="32"/>
            <Setter Property="Margin" Value="0 0 0 10"/>
        </Style>

        <Style x:Key="DetailsStyle" TargetType="{x:Type StackPanel}">
            <Setter Property="Margin" Value="20 0 0 0"/>
            <Setter Property="Grid.Column" Value="1"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <Style x:Key="FrameStyle" TargetType="{x:Type Border}">
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Background" Value="GhostWhite"/>
        </Style>

        <Style x:Key="PhotoStyle" TargetType="{x:Type Image}">
            <Setter Property="Width" Value="{Binding ElementName=Host, Path=DataContext.ImageSize.Width}"/>
            <Setter Property="Height" Value="{Binding ElementName=Host, Path=DataContext.ImageSize.Height}"/>
        </Style>

        <DataTemplate DataType="{x:Type m:PersonModel}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>