C #, WPF - VisualBrush и OpacityMask - PullRequest
Новая
       53

C #, WPF - VisualBrush и OpacityMask

2 голосов
/ 21 декабря 2009

Мне нужно создать UserControl, в котором часть фона элемента управления прозрачна. Прозрачная часть вырезана в форме границы с CornerRadius, равным 2 - это требуется из-за дизайна.

Вот мой код, который не работает: 

    <UserControl Margin="1" x:Name="Box">
        <UserControl.Resources>
            <Style TargetType="UserControl">
                <Setter Property="Height" Value="16" />
            </Style>
        </UserControl.Resources>
        <Grid>
            <Border CornerRadius="2" BorderThickness="0">
                <Border.Background>
                    <SolidColorBrush Color="Black" Opacity=".3" />
                </Border.Background>
                <Border.OpacityMask>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Grid 
                                Background="Black" 
                                Width="{Binding ElementName=Box, Path=ActualWidth}"
                                Height="{Binding ElementName=Box, Path=ActualHeight}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="1" Margin="1" CornerRadius="2" Background="Transparent" BorderThickness="0" />
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Border.OpacityMask>
            </Border>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <TextBlock 
                    VerticalAlignment="Center" TextAlignment="Right" FontSize="10" Margin="2"
                    Foreground="White" Text="Property" />

                <TextBlock 
                    Grid.Column="1" VerticalAlignment="Center" TextAlignment="Center" FontSize="10" Margin="2"
                    Text="Value" />
            </Grid>
        </Grid>
    </UserControl>

Я внес несколько изменений, так что вы, ребята, сможете добавить это прямо в XamlPad.

По какой-то причине мой VisualBrush, для которого установлен параметр OpacityMask, не работает вообще. OpacityMask просто отображает все полностью видимым. Для теста я бросил быстрый LinearGradientBrush, и он работал как положено.

Есть ли какие-то проблемы с использованием VisualBrush и OpacityMask вместе? Что здесь не так?

Вот скриншот того, чего я пытаюсь достичь:

ScreenShot http://monitor.utopiaselfscan.com/Screen.png

UserControl - это заголовки, в которых указывается номер объекта, прогресс, часы и т. Д. Они имеют черный цвет с прозрачностью 30% и имеют вырез из маски прямоугольника с закругленными углами. Я обычно использую изображения для рендеринга подобных вещей, потому что наш художник-график может сойти с ума с эффектами, похожими на стекло.

Ответы [ 2 ]

2 голосов
/ 21 декабря 2009

Кто такой Box в вашем коде? Не могли бы вы также добавить изображение того, чего вы хотите достичь?

Вы пробовали Пути, чтобы получить то, что вы хотите? Например. следующий путь: 

<Path Stroke="Black" Stretch="Fill" StrokeThickness="1" Fill="#CCCCFF">
    <Path.Data>
     <GeometryGroup FillRule="EvenOdd" >
      <EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />              
      <RectangleGeometry Rect="30,55 100 30" />
    </GeometryGroup>
  </Path.Data>
</Path>

Дает вам этот вырез: альтернативный текст http://img704.imageshack.us/img704/928/cutw.jpg

РЕДАКТИРОВАТЬ: Вот один из способов достижения вашего дизайна: 

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Page.Resources>
      <SolidColorBrush x:Key="FillBrush" Color="Gray" Opacity="0.3"/>
   </Page.Resources>
   <Grid>
   <!-- Set background image here, instead of border-->
      <Border>
         <Border.Background>
            <LinearGradientBrush>
               <GradientStop Color="#FFcacaca"/>
               <GradientStop Offset="1" Color="#FF353535"/>
            </LinearGradientBrush>
         </Border.Background>
      </Border>
   <!-- Content goes here -->
      <Grid>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <Border
            MinHeight="24"
            MinWidth="100"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Background="{StaticResource FillBrush}"
            CornerRadius="15, 0, 0, 15"
            Padding="0, 0, 5, 0">
            <TextBlock
               HorizontalAlignment="Right"
               VerticalAlignment="Center"
               Foreground="White"
               Text="From"/>
         </Border>
         <Border
            MinHeight="24"
            MinWidth="100"
            Grid.Column="1"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            BorderBrush="{StaticResource FillBrush}"
            BorderThickness="1"
            CornerRadius="0, 15, 15, 0">
            <TextBox
               Margin="5, 0, 5, 0"
               VerticalAlignment="Center"
               Background="Transparent"
               BorderThickness="0"
               Foreground="#2f3740"
               Text="Verylongname, Johnathan"/>
         </Border>
      </Grid>
   </Grid>
</Page>

Суть в том, чтобы использовать две границы и одну кисть. Для полей заголовка вы рисуете фон границы, а для полей содержимого вы рисуете бордюр:).

Приветствия, Анвака.

0 голосов
/ 23 декабря 2009

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

Вы можете найти объект, который я использую в качестве маски, из этого поста:

Геометрия нечетной формы

...