Обрезка Silverlight UserControl, когда ширина родительского столбца установлена ​​в GridUnitType.Star

Question

У меня есть пользовательский элемент управления, содержащий эллипс. Эллипс трансформируется вправо до тех пор, пока не окажется частично вне родительского контроля.

Я поместил пользовательский элемент управления в средний столбец сетки из 3 столбцов.

Если я установлю ширину столбца в GridUnitType. В автоматическом режиме я вижу эллипс, переполняющий столбец. Если я установлю ширину столбца в GridUnitType.Star, эллипс все еще переполняет столбец, но теперь он обрезается до ширины столбца.

Мне нужно равномерно распределить ширину столбцов с помощью GridUnitType.Star, но не нужно обрезать преобразованный контент.

Я включил пример кода ниже. Любая помощь будет оценена.

UserControl (содержит эллипс)

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="GridWidthTest.UserControl1">

<Grid x:Name="LayoutRoot" Background="Green">
    <Ellipse Fill="#FFF40404" Stroke="Black" Grid.Column="1" Width="400" Height="400" RenderTransformOrigin="0.5,0.5">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <TranslateTransform X="200"/>
            </TransformGroup>
        </Ellipse.RenderTransform>
    </Ellipse>          
</Grid>

Родительский контроль (содержащий сетку)

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:GridWidthTest" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="GridWidthTest.MainPage"
Width="640" Height="480" mc:Ignorable="d">

<Grid x:Name="LayoutRoot" Background="White">

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>           

        <local:UserControl1 Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>             
    </Grid>         
</Grid>

Answer 1

Спасибо за ответ.

Я решил эту проблему, обернув эллипс в холст, что означает, что он не обрезается.

Answer 2

Это очень сложная задача для решения. Во-первых, важно понять, что на самом деле делает RenderTransform. Он преобразует то, что было отрендерено. Каждый пиксель перемещается в новую позицию на основе того, что в конечном итоге является довольно простым матричным вычислением. Это происходит довольно поздно во всем процессе рендеринга. Эллипс уже обрезан до преобразования применяется.

Механизм компоновки проходит две фазы: мера , где элементы соперничают за свои предпочтительные условия (эллипс хочет, чтобы поле размером 400 x 400 отображалось), затем упорядочивает , где элементы их контейнеры сказали, что у них есть на самом деле.

В случае, когда для ширины столбца установлено значение «Авто», Grid уступает запросу UserControl во время фазы измерения для блока ширины 400. Эллипс отображается без какого-либо отсечения, потому что блок достаточно большой затем RenderTransform переводит результаты на новую позицию.

В случае, когда ширина столбца равна «*», Grid предоставит UserControl только поле ширины, определяемое долей этого столбца в доступной ширине, даже если это меньше, чем UserControl требуемая ширина. В этом случае эллипс визуализируется, но должен обрезаться до границы указанного поля. , а затем , что этот обрезанный эллипс переведен на новую позицию.

Чтобы иметь возможность вырваться из данного поля, элемент может указывать отрицательные поля. Это приведет к увеличению поля для рендеринга. Например, если контейнер указывает, что ширина составляет всего 200, а UserControl имеет поле -100, то фактическое поле отображается в ширину 400 пикселей.

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