WPF: 폭(및 높이)을 퍼센티지 값으로 설정

WPF: 폭(및 높이)을 퍼센티지 값으로 설정

Say I want a.TextBlock그것을 가지다Width상위 컨테이너와 같음Width(즉, 좌우로 늘어짐) 또는 상위 컨테이너의 비율Width를 사용하여 이를 실현하려면XAML절대값을 지정하지 않고요?

상위 컨테이너 컨테이너가 나중에 확장될 경우(컨테이너 컨테이너의Width(HTML 및 CSS와 같이 기본적으로)의 자 요소도 자동으로 확장됩니다.

그리드 내에 텍스트 상자를 배치하여 그리드의 행 또는 열에 백분율 값을 수행하고 텍스트 상자가 부모 셀에 자동으로 채워지도록 할 수 있습니다(기본적으로).예:

<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가 됩니다.

부모 컨테이너와 같은 크기로 확장하려면 다음 속성을 사용합니다.

 <Textbox HorizontalAlignment="Stretch" ...

그러면 텍스트 상자 요소가 수평으로 늘어나고 모든 상위 공간이 수평으로 채워집니다(실제로 사용하는 상위 패널에 따라 다르지만 대부분의 경우 작동합니다).

백분율은 그리드 셀 값에만 사용할 수 있으므로 그리드를 만들고 적절한 백분율로 텍스트 상자를 셀 중 하나에 넣는 방법도 있습니다.

일반적으로 시나리오에 적합한 내장 레이아웃 컨트롤을 사용합니다(예를 들어 부모에 대해 상대적인 확장을 원하는 경우 그리드를 부모로 사용).임의의 부모 요소를 사용하여 작업을 수행할 경우 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>

"2*"와 같은 오류가 발생한 경우 문자열을 Length로 변환할 수 없습니다.

<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>

IValue Converter 구현을 사용할 수 있습니다.IValueConverter에서 상속을 받는 Converter 클래스는 다음과 같은 파라미터를 취합니다.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>

상대적인 사이징에는 두 가지 방법을 사용합니다.나는 라는 수업이 있다.Relative세 가지 성질이 붙어 있다To,WidthPercent ★★★★★★★★★★★★★★★★★」HeightPercent시각적인 트리에서 요소의 상대적인 크기가 되어 컨버터 접근법보다 덜 진부한 느낌이 드는 요소를 원하는 경우 유용합니다. - 비록 당신이 만족하는 것을 사용하지만.

하다ViewBox안에 인 크기를 그 에 상대적인 크기를 .Grid 1001991.100cm입니다. 다음에 '이렇게'를 TextBlock10%로 100%로 10%로 하다.

ViewBoxGrid에 따라 " 공간", "이러한 공간", "이러한 공간", "이러한 공간", "이러한 공간", "이러한 공간", "이러한 공간", "이러한 공간"이 표시됩니다.Grid 되어,으로 「전폭」이 .TextBlock10%로 하다

이를 on on 의 높이를 하지 않은 높이를 Grid내용물에 맞게 줄어들기 때문에 크기가 상대적으로 커집니다.'어울리다', '어울리다', '어울리다', '어울리다', '어울리다', '어울리다'에 비율을 수 .ViewBox그렇지 않으면 높이도 올라가기 시작합니다. '어느 정도'로 하면 될 것 같아요.StretchUniformToFill.

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%)인 것으로 보이며 필요에 따라 늘어납니다.

언급URL : https://stackoverflow.com/questions/717299/wpf-setting-the-width-and-height-as-a-percentage-value