Положение изображения в сетке с ZIndex

Question

У меня есть изображение поверх кнопки, которая находится на сетке. Я хочу разместить изображение за кнопкой при нажатии на кнопку «Скрыть изображение». Я пытался с Panel.ZIndex, но, видимо, он не доступен для Grid.

  <Grid HorizontalAlignment="Left" Height="100" Margin="201,79,0,0" VerticalAlignment="Top" Width="100">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button x:Name="btn_1" Grid.Column="0" Grid.Row="0" Panel.ZIndex="-1"/>
        <Image Source="Max_dog.png" Grid.Column="0" Grid.Row="0"/>

        <Button x:Name="btn_2" Grid.Column="1" Grid.Row="0"/>
        <Button x:Name="btn_3" Grid.Column="0" Grid.Row="1"/>
        <Button x:Name="btn_4" Grid.Column="1" Grid.Row="1"/>
    </Grid>
    <Button Content="Button"  Margin="215,205,228.667,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>

Answer 1

Правильный способ сделать это в WPF - это иметь модель представления , которую вы присоединяете к контексту данных окна или элемента управления. Затем вы привязываете свойство модели представления к свойству Visibility изображения.

public class MyViewModel : INotifyPropertyChanged
{
    private bool _isImageVisible;
    public bool IsImageVisible
    {
        get { return _isImageVisible; }
        set {
            if (value != _isImageVisible) {
                _isImageVisible = value;
                OnPropertyChanged(nameof(ImageVisibility));
            }
        }
    }

    public Visibility ImageVisibility => _isImageVisible
        ? Visibility.Visible
        : Visibility.Hidden; // or Collapsed

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion
}

В XAML

<Image Source="Max_dog.png" Grid.Column="0" Grid.Row="0"
    Visibility="{Binding ImageVisibility}"/>

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

Answer 2

WPF формирует элементы управления в макете в стеке. Элемент ниже в стеке всегда будет иметь более низкий индекс zIndex по сравнению с элементом в более высокой позиции. Решение здесь, чтобы изменить объявление операторов на

<Grid HorizontalAlignment="Left" Height="100" Margin="201,79,0,0" VerticalAlignment="Top" Width="100">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Image Source="Max_dog.png" Grid.Column="0" Grid.Row="0"/>
        <Button x:Name="btn_1" Grid.Column="0" Grid.Row="0"/>
        <Button x:Name="btn_2" Grid.Column="1" Grid.Row="0"/>
        <Button x:Name="btn_3" Grid.Column="0" Grid.Row="1"/>
        <Button x:Name="btn_4" Grid.Column="1" Grid.Row="1"/>
    </Grid>
    <Button Content="Button"  Margin="215,205,228.667,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>

См. Объявление кнопки и изображение было перевернуто.

Answer 3

Я нашел решение

private void Button_Click(object sender, RoutedEventArgs e)
    {
        btn_1.SetValue(Panel.ZIndexProperty, 3);
    }