web-dev-qa-db-ja.com

WPF：幅（および高さ）をパーセント値として設定

TextBlockのWidthを親コンテナーのWidth（つまり、左右にストレッチする）または親コンテナーのWidthの割合に等しくする場合、絶対値を指定せずにXAMLでこれを達成するにはどうすればよいですか？

これは、親コンテナコンテナが後で展開された場合（そのWidthが増加した場合）、その子要素も自動的に展開されるようにするためです。 （基本的に、HTMLやCSSのように）

wpfxamlresize
140
Andreas Grech

親コンテナと同じサイズに拡大するには、次の属性を使用します。

 <Textbox HorizontalAlignment="Stretch" ...

これにより、Textboxエレメントが水平方向に引き伸ばされ、すべての親スペースが水平方向に埋められます（実際には、使用している親パネルによって異なりますが、ほとんどの場合は機能します）。

パーセンテージはグリッドセル値でのみ使用できるため、別のオプションとして、グリッドを作成し、適切なパーセンテージでセルの1つにテキストボックスを配置することができます。

83
gcores

テキストボックスをグリッド内に配置して、グリッドの行または列にパーセント値を入力し、テキストボックスを親セルに自動的に入力することができます（デフォルトのように）。例：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>

    <TextBox Grid.Column="0" />
    <TextBox Grid.Column="1" />
</Grid>

これにより、幅が＃1 2/5になり、＃2 3/5になります。

200
cwap

通常、シナリオに適した組み込みのレイアウトコントロールを使用します（たとえば、親に対してスケーリングする場合は、グリッドを親として使用します）。任意の親要素を使用してそれを実行したい場合は、ValueConverterを作成して実行できますが、おそらくあなたが望むほどきれいではないでしょう。ただし、どうしても必要な場合は、次のようなことができます。

public class PercentageConverter : IValueConverter
{
    public object Convert(object value, 
        Type targetType, 
        object parameter, 
        System.Globalization.CultureInfo culture)
    {
        return System.Convert.ToDouble(value) * 
               System.Convert.ToDouble(parameter);
    }

    public object ConvertBack(object value, 
        Type targetType, 
        object parameter, 
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

次のように使用すると、親キャンバスの幅の10％の子テキストボックスを取得できます。

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <local:PercentageConverter x:Key="PercentageConverter"/>
    </Window.Resources>
    <Canvas x:Name="canvas">
        <TextBlock Text="Hello"
                   Background="Red" 
                   Width="{Binding 
                       Converter={StaticResource PercentageConverter}, 
                       ElementName=canvas, 
                       Path=ActualWidth, 
                       ConverterParameter=0.1}"/>
    </Canvas>
</Window>
54
kvb

次のようなエラーが表示される場合：'2 *'文字列は長さに変換できません。

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" /><!--This will make any control in this column of grid take 2/5 of total width-->
        <ColumnDefinition Width="3*" /><!--This will make any control in this column of grid take 3/5 of total width-->
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition MinHeight="30" />
    </Grid.RowDefinitions>

    <TextBlock Grid.Column="0" Grid.Row="0">Your text block a:</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0">Your text block b:</TextBlock>
</Grid>
30
Zain Ali

IValueConverter実装を使用できます。 IValueConverterを継承するコンバータークラスは、value（パーセンテージ）やparameter（親の幅）などのパラメーターを取り、目的の幅の値を返します。 XAMLファイルでは、コンポーネントの幅は次の値で設定されます。

public class SizePercentageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (parameter == null)
            return 0.7 * value.ToDouble();

        string[] split = parameter.ToString().Split('.');
        double parameterDouble = split[0].ToDouble() + split[1].ToDouble() / (Math.Pow(10, split[1].Length));
        return value.ToDouble() * parameterDouble;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // Don't need to implement this
        return null;
    }
}

XAML：

<UserControl.Resources>
    <m:SizePercentageConverter x:Key="PercentageConverter" />
</UserControl.Resources>

<ScrollViewer VerticalScrollBarVisibility="Auto"
          HorizontalScrollBarVisibility="Disabled"
          Width="{Binding Converter={StaticResource PercentageConverter}, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualWidth}"
          Height="{Binding Converter={StaticResource PercentageConverter}, ConverterParameter=0.6, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualHeight}">
....
</ScrollViewer>
5
Adem Catamak

私はそれがXamlではないことを知っていますが、テキストボックスのSizeChangedイベントで同じことをしました：

private void TextBlock_SizeChanged(object sender, SizeChangedEventArgs e)
{
   TextBlock textBlock = sender as TextBlock;
   FrameworkElement element = textBlock.Parent as FrameworkElement;
   textBlock.Margin = new Thickness(0, 0, (element.ActualWidth / 100) * 20, 0);
}

テキストボックスは親の80％のサイズで（右側の余白は20％）、必要に応じて拡大されます。

4
Crippeoblade

相対的なサイズ設定には2つの方法を使用します。 Relativeというクラスがあり、3つの付加プロパティTo、WidthPercent、HeightPercentがあります。これは、要素をビジュアルツリー内の任意の場所の要素の相対的なサイズにしたい場合に便利です。あなた、あなたが満足していること。

もう1つのアプローチは、かなりmoreです。 ViewBoxを内部に相対サイズが必要な場所に追加し、その中に幅100でGridを追加します。その後、幅10のTextBlockをその内部に追加すると、明らかに100の10％になります。

ViewBoxは、指定されたスペースに応じてGridをスケーリングします。したがって、ページ上の唯一のものである場合、Gridは全幅でスケールアウトされ、効果的に、TextBlockはページの10％にスケーリングされます。

Gridに高さを設定しない場合、コンテンツに合わせてサイズが縮小されるため、すべて比較的サイズが大きくなります。コンテンツが高くなりすぎないようにする必要があります。つまり、ViewBoxに指定されたスペースのアスペクト比を変更し始めます。そうしないと、高さのスケーリングも開始されます。おそらくStretchのUniformToFillでこれを回避できます。

4
Luke Puplett