WPF: चौड़ाई (और ऊँचाई) को प्रतिशत मान के रूप में सेट करना

Question

मान लीजिए कि मैं TextBlockइसके Widthलिए इसके पेरेंट कंटेनर के बराबर है Width(यानी, बगल से खिंचाव) या पेरेंट कंटेनर का प्रतिशत इसके बराबर है Width, मैं XAMLपूर्ण मूल्यों को निर्दिष्ट किए बिना इसे कैसे पूरा कर सकता हूं ?

मैं ऐसा इसलिए करना चाहता हूं कि अगर बाद में पेरेंट कंटेनर कंटेनर का विस्तार (उसके ' Widthबढ़े हुए) होने पर, उसके' चाइल्ड एलिमेंट्स 'का भी अपने आप विस्तार हो जाए। (मूल रूप से, HTML और CSS की तरह)

Comments

इस जवाब पर एक नजर ।

— जेस्पर फेयर नॉड्सन 16

Cwap के उत्तर का उपयोग करें और एक ग्रिड सेटिंग में tb को शामिल करें जो इसे खिंचाव के लिए संरेखित करता है।

— शिमी वेइटहैंडलर

Answer 1

पैरेंट कंटेनर के समान आकार में इसे फैलाने का तरीका विशेषता का उपयोग करना है:

 <Textbox HorizontalAlignment="Stretch" ...

यह टेक्स्टबॉक्स तत्व को क्षैतिज रूप से बढ़ाएगा और सभी मूल स्थान को क्षैतिज रूप से भर देगा (वास्तव में यह आपके द्वारा उपयोग किए जा रहे मूल पैनल पर निर्भर करता है लेकिन अधिकांश मामलों के लिए काम करना चाहिए)।

प्रतिशत का उपयोग केवल ग्रिड सेल वैल्यू के साथ किया जा सकता है, इसलिए एक अन्य विकल्प ग्रिड बनाना और उपयुक्त टेक्स्ट के साथ अपना टेक्स्टबॉक्स किसी एक सेल में डालना है।

Answer 2

आप ग्रिड के पंक्तियों या स्तंभों पर प्रतिशत मान करने के लिए पाठ बॉक्स को ग्रिड के अंदर रख सकते हैं और पाठ बॉक्स को उनके मूल कक्षों में ऑटो-फिल कर सकते हैं (जैसा कि वे डिफ़ॉल्ट रूप से करेंगे)। उदाहरण:

<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 बना देगा।

Comments

मैंने पहले ही कोशिश कर ली है, लेकिन मुझे यह त्रुटि मिल रही है: '2 *' स्ट्रिंग को लंबाई में नहीं बदला जा सकता है। '

— एंड्रियास ग्रीच

); वास्तव में, * (तारांकन) लिटिल स्टार है etymonline.com/index.php?term=asterisk

— प्रतीक Deoghare

मेरी माँ का कहना है कि मैं एक स्टार हूँ

— डेनिस वेसल्स

यह काम नहीं करता है, भले ही टेक्स्टबॉक्स एक ग्रिड में हो। चौड़ाई एक डबल, अर्हताप्राप्त डबल (एक डबल मान px द्वारा, सेमी या pt) या ऑटो पर सेट की जा सकती है। देखें msdn.microsoft.com/en-GB/library/...

— डैरेन

हां .. यह वास्तव में एक बहुत ही खराब उत्तर है, लेकिन सभी उत्थानों के आधार पर, मुझे लगता है कि इससे किसी को मदद मिली थी (बहुत समय पहले), यही कारण है कि मैंने इसे नहीं हटाया है।

— जुआन

Answer 3

आमतौर पर, आप अपने परिदृश्य के लिए एक बिल्ट-इन लेआउट नियंत्रण का उपयोग करेंगे (जैसे यदि आप माता-पिता के सापेक्ष स्केलिंग चाहते हैं तो ग्रिड का उपयोग करें)। यदि आप इसे मनमाने ढंग से मूल तत्व के साथ करना चाहते हैं, तो आप एक ऐसा मान कर सकते हैं, जिसे आप कर सकते हैं, लेकिन यह उतना साफ नहीं होगा जितना आप चाहते हैं। हालाँकि, अगर आपको इसकी आवश्यकता है, तो आप कुछ इस तरह से कर सकते हैं:

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>

Comments

यह वास्तव में अच्छा है, मैं इसे कोड में कैसे कर सकता हूं (टेक्स्टबॉक्स की चौड़ाई सेट करें)?

— जेरेमी

आपको CultureInfo.InvariantCultureदोहरे रूपांतरण में जोड़ने पर विचार करना चाहिए क्योंकि parameterजैसा माना जाता है stringऔर विभिन्न संस्कृतियों में decimal separatorयह अपेक्षा के अनुरूप काम नहीं करेगा।

— फ्लैट एरिक

Answer 4

जिस किसी के लिए भी त्रुटि हो रही है जैसे: '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>

Comments

क्यों नहीं <RowDefinition Height="auto" />?

— बेन

"ऑटो" को केवल उतनी ही जगह

— यम

बहुत बहुत धन्यवाद, यह शीर्ष उत्तर होना चाहिए।

— माफिया

यह निश्चित रूप से सबसे अच्छा जवाब है।

— नॉट वेलन

Answer 5

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>

Answer 6

मुझे पता है कि यह 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% है) और जब जरूरत होती है, तो खिंचाव होता है।

Answer 7

मैं सापेक्ष आकार देने के लिए दो विधियों का उपयोग करता हूं। मेरे पास Relativeतीन संलग्न गुणों के साथ एक वर्ग है To, WidthPercentऔर HeightPercentजो उपयोगी है अगर मैं चाहता हूं कि एक तत्व दृश्य पेड़ में कहीं भी एक तत्व का रिश्तेदार आकार हो और कनवर्टर दृष्टिकोण की तुलना में कम हैकरी महसूस करता है - हालांकि आपके लिए जो काम करता है, उसका उपयोग करें 'खुश हैं।

अन्य दृष्टिकोण अधिक चालाक है। एक जोड़े ViewBoxजहां सापेक्ष आकार के अंदर चाहते हैं, तो उस के अंदर, एक जोड़ने Gridचौड़ाई 100 पर फिर अगर आप एक जोड़ने TextBlock10 कि अंदर चौड़ाई के साथ, यह स्पष्ट रूप से 100 का 10% है।

ViewBoxस्केल करेगा Gridकरने के लिए जो कुछ भी अंतरिक्ष यह दिया गया है अनुसार, इसलिए यदि पृष्ठ पर इसका केवल एक चीज है, तो Gridबाहर पूरी चौड़ाई अनुसार बदल दिया जाएगा और प्रभावी ढंग से, अपने TextBlockपेज का 10% तक बढ़ाया गया है।

यदि आप ऊंचाई पर सेट नहीं करते हैं Gridतो यह अपनी सामग्री को फिट करने के लिए सिकुड़ जाएगा, इसलिए यह सभी अपेक्षाकृत आकार का होगा। आपको यह सुनिश्चित करना होगा कि सामग्री बहुत अधिक न हो, अर्थात अंतरिक्ष के पहलू अनुपात को बदलना शुरू कर दें, ViewBoxअन्यथा यह ऊंचाई को मापना शुरू कर देगा। आप शायद इस के चारों ओर एक Stretchके साथ काम कर सकते हैं UniformToFill।