Фиксация opacity mask wpf

200

24 июля 2018, 16:50

Нужно получить такое меню с прокруткой

Делаю это при помощи opacity mask в grid

<Grid x:Name="scroll_menu_grid" Width="95" Height="453" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="597,81,0,81">
        <Grid.OpacityMask>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0.5"/>
                <GradientStop Offset="1"/>
                <GradientStop Offset="0"/>
            </LinearGradientBrush>
        </Grid.OpacityMask>
        <Image x:Name="test_image" HorizontalAlignment="Center" Source="Resources/Images/Icons/menu/persons.png" VerticalAlignment="Center" Width="65" RenderTransformOrigin="0.5,0.5" Margin="15,0,15,174" Opacity="0.3"/>
        <Image x:Name="test_image1" HorizontalAlignment="Center" Source="Resources/Images/Icons/menu/persons.png" VerticalAlignment="Center" Width="65" RenderTransformOrigin="0.5,0.5"/>
        <Image x:Name="test_image2" HorizontalAlignment="Center" Source="Resources/Images/Icons/menu/persons.png" Width="65" RenderTransformOrigin="0.5,0.5" Margin="15,174,15,0" VerticalAlignment="Center" Opacity="0.3"/>
 </Grid>

Но при перемещении кнопок, opacity mask также перемещается (Изменяю только margin кнопок)
Как заблокировать opacity mask и отображать его независимо от контента внутри grid

Answer 1

Используйте маску на объект выше, скажем возьмем к примеру ScrollViewer, ему задаем маску и внутрь кладем весь ваш Grid, но маску уже ему не задаем. Получаем что то вроде:

<ScrollViewer>
    <ScrollViewer.OpacityMask>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0.5"/>
            <GradientStop Offset="1"/>
            <GradientStop Offset="0"/>
        </LinearGradientBrush>
    </ScrollViewer.OpacityMask>
    <Grid x:Name="scroll_menu_grid" Width="95" Height="453" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="597,81,0,81">
        <Image x:Name="test_image" HorizontalAlignment="Center" Source="Resources/Images/Icons/menu/persons.png" VerticalAlignment="Center" Width="65" RenderTransformOrigin="0.5,0.5" Margin="15,0,15,174" Opacity="0.3"/>
        <Image x:Name="test_image1" HorizontalAlignment="Center" Source="Resources/Images/Icons/menu/persons.png" VerticalAlignment="Center" Width="65" RenderTransformOrigin="0.5,0.5"/>
        <Image x:Name="test_image2" HorizontalAlignment="Center" Source="Resources/Images/Icons/menu/persons.png" Width="65" RenderTransformOrigin="0.5,0.5" Margin="15,174,15,0" VerticalAlignment="Center" Opacity="0.3"/>
    </Grid>
</ScrollViewer>

P.S. Что бы вы не задавали в будущем вопросы по типу "почему мои объекты съезжают" - умаляю вас, не используйте редактор студии для позиционирования элементов! Он добавляет много ужасных вещей в виде Margin="597,81,0,81". Учите XAML и пишите код сами, а редактор использовать чисто для просмотра результата.

Также, x:Name="test_image" - запомните, что WPF не WinForms! В WPF принято использовать Binding и паттерн MVVM. Пока не поздно, изучите это все, ибо сейчас вы уже делаете много костылей...