1

Разрабатываю приложение, в котором нужно сделать некое окно, оно должно:

  • Быть всегда посередине приложения.
  • Изменять размер при изменении размера самого Window.
  • Иметь контент.
  • Иметь изображение сбоку, которое, в свою очередь, должно:
    • Привязаться четко к левой части окна за центр (то есть центр изображения должен всегда находиться в начале окна).
    • Изменять размер вместе с окном.

Что я имею ввиду:

project

Как видим, по центру есть "окошко", оно четко по центру, меняет размер, все как положено. Слева есть эльфийка, которая должна быть всегда в этом месте и изменять размер вместе с самим окном. И тут возникает проблема (даже проблемы)...

  1. Эльфийка двигается при изменении размера приложения. Что бы я не делал, вечно прихожу к такому результату (заезжает на окно) и "приколоть" ее к нужной точке без указания точных размеров не получается:

Resize

  1. Для получения такого результата пришлось указать Margin="-160 0 0 0", что не есть хорошо...

Текущий вариант:

<!--#region Основная сетка с затенением-->
    <Grid Background="#81000000">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="4*" MaxHeight="550"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="*" MaxWidth="450"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="1" Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <!--#region Рамка/Цвет/Тень-->
            <Border Grid.ColumnSpan="2" Background="{StaticResource Color.Main.Brush}" 
                    CornerRadius="5"
                    BorderThickness="0 .7 0 .7" 
                    BorderBrush="{StaticResource Color.Line.Horizontal.GradientBrush}">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="1" Direction="-90" />
                </Border.Effect>
            </Border>
            <!--#endregion-->
            <Grid Column="1">
                <!--#region Контент-->
                <Grid>
                    <!-- /// -->
                </Grid>
                <!--#endregion-->
            </Grid>
            <!--#region Изображение-->
            <Image Grid.Column="0"
                   Source="../../Resources/cha_elf.png"
                   VerticalAlignment="Bottom" HorizontalAlignment="Right" 
                   Margin="-160 0 0 0"/>
            <!--#endregion-->
        </Grid>
    </Grid>
<!--#endregion-->

Пробовал StackPanel, DockPanel, Grid (все в 1 ячейке и сдвигать объект, не двигался, разбить по колонкам - текущий результат), все безрезультатно...

Собственно вопрос: Как грамотно "указать эльфийке" место?

0

1 ответ 1

1

Размещайте картинку в отдельном Grid, а не в том же самом, где у вас рамка:

<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="4*"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="1" Grid.Row="1" Background="Gray" 
                CornerRadius="5" BorderThickness="0,.7" BorderBrush="Black">
            <Border.Effect>
                <DropShadowEffect ShadowDepth="1" Direction="-90" />
            </Border.Effect>
            <Button Content="Click me" Click="Button_Click" Padding="10,2"
                    VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
    </Grid>
    <Grid IsHitTestVisible="False">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="4*"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="1.5*"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="1" Grid.Row="1"
               Source="elf.png"/>
    </Grid>
</Grid>

введите сюда описание изображения

Проблема будет возникать лишь когда ширина окна будет достигать величин меньших чем N * высота окна, где N зависит от пропорций картинки и пропорций строк/столбцов грида — картинка начнет уменьшаться по высоте, а рамка оставаться такой же:

введите сюда описание изображения

Решение здесь зависит от того, какое поведение вы предпочтете больше: либо мы начинаем обрезать картинку (сверху и/или снизу), либо, что я вижу более приемлемым, мы запрещаем величине ширинаОкна / высотаОкна достигать значений меньших, чем (вышеупомянутое) N, это можно сделать с помощью конвертера масштаба:

class ScaleConverter : ConverterBase
{
    public double Scale { get; set; }

    public ScaleConverter(double scale)
        => Scale = scale;

    public override object Convert(object value, Type targetType,
        object parameter, CultureInfo culture) => (double)value * Scale;
}

и в окне:

<Window ...
        MinWidth="{Binding RelativeSource={RelativeSource Self},
            Path=ActualHeight, Converter={c:ScaleConverter 0.66}}">

введите сюда описание изображения

8
  • Мм, любопытный подход к конвертерам, возьму на вооружение. Вроде теперь все как надо. Спасибо! Только одного не пойму, почему Scale = 0.66?
    – EvgeniyZ
    4 окт 2018 в 15:51
  • 1
    N зависит от пропорций картинки и пропорций строк/столбцов грида — я установил высоту 300 и плавно уменьшал ширину окна до того момента, пока картинка не начала уменьшать высоту, получилось ~198, итого 198/300=0,66. У вас будут другие значения, лучше оставить небольшой запас на случай разного отображения у разных пользователей на разных ОС 4 окт 2018 в 16:02
  • ConverterBase можете взять здесь: ru.stackoverflow.com/a/748699/218063 4 окт 2018 в 16:04
  • Да, я уже нашел его, спасибо)
    – EvgeniyZ
    4 окт 2018 в 16:09
  • Расширения разметки — наше всё для сокращения ее размеров :) 4 окт 2018 в 16:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.