আমি কীভাবে একটি স্ট্যাকপ্যানেলের শিশু উপাদানগুলিকে স্থান দিতে পারি?

Question

একটি স্ট্যাকপ্যানেল দেওয়া হয়েছে:

<StackPanel>
  <TextBox Height="30">Apple</TextBox>
  <TextBox Height="80">Banana</TextBox>
  <TextBox Height="120">Cherry</TextBox>
</StackPanel>

শিশু উপাদানগুলি নিজেরাই বিভিন্ন আকারের হওয়া সত্ত্বেও তাদের মধ্যে সমান আকারের ব্যবধান থাকতে পারে বলে শিশুদের উপাদানগুলি স্থান দেওয়ার সর্বোত্তম উপায় কী? পৃথক বাচ্চাদের প্রত্যেকের উপর সম্পত্তি স্থাপন না করে কি এটি করা যায়?

Comments

সত্যিই কেবল পৃথক আইটেমগুলিতে প্যাডিং যুক্ত করা সর্বোত্তম বিকল্প বলে মনে হয়।

— জার

Answer 1

মার্জিন বা প্যাডিং ব্যবহার করুন, ধারকটির মধ্যে স্কোপগুলিতে প্রয়োগ করা:

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="0,10,0,0"/>
        </Style>
    </StackPanel.Resources> 
    <TextBox Text="Apple"/>
    <TextBox Text="Banana"/>
    <TextBox Text="Cherry"/>
</StackPanel>

সম্পাদনা: আপনি যদি দুটি ধারকগুলির মধ্যে মার্জিনটি পুনরায় ব্যবহার করতে চান, আপনি মার্জিন মানকে একটি বাহ্যিক স্কোপের একটি সংস্থায় রূপান্তর করতে পারেন

<Window.Resources>
    <Thickness x:Key="tbMargin">0,10,0,0</Thickness>
</Window.Resources>

এবং তারপরে অভ্যন্তরীণ সুযোগে এই মানটি উল্লেখ করুন

<StackPanel.Resources>
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="Margin" Value="{StaticResource tbMargin}"/>
    </Style>
</StackPanel.Resources>

Comments

স্কোপড স্টাইলটি এটি করার একটি দুর্দান্ত উপায় - টিপটির জন্য ধন্যবাদ!

— আনা বেটস

আমি যদি পুরো প্রকল্পের জন্য এটি ব্যবহার করতে চাই তবে কী হবে?

— grv_9098

কেউ কী ব্যাখ্যা করতে পারবেন যখন আপনি প্রকারটি (যেমন টেক্সটবক্স) স্পষ্টভাবে সংজ্ঞায়িত করেন তবে এটি কেন কাজ করে? যদি আমি ফ্রেমওয়ার্ক এলিমেন্ট ব্যবহার করে এটি চেষ্টা করি যাতে সমস্ত বাচ্চা ব্যবধানে থাকে, এর কোনও প্রভাব নেই।

— জ্যাক উকলেজা

আপনি ইতিমধ্যে কোনও শৈলীর সংজ্ঞা দিলে এটি ভাল কাজ করে না Button।

— মার্ক ইঙ্গ্রাম

পার্শ্ব নোট হিসাবে, আপনি যদি LabelPaddingMargin

— এন্থনি নিকোলস

Answer 2

এখানে আরও একটি দুর্দান্ত পদ্ধতির দেখা যাবে: http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/ কি-is-tas-easiest-way-to-set-spacing-between- আইটেমস-ইন-স্ট্যাকপ্যানেল.এএসপিএক্স লিঙ্কটি ভাঙ্গা -> এটি এই লিঙ্কটির ওয়েবআর্কাইভ ।

এটি দেখায় যে কীভাবে সংযুক্ত আচরণ তৈরি করা যায়, যাতে সিনট্যাক্স এর মতো কাজ করে:

<StackPanel local:MarginSetter.Margin="5">
   <TextBox Text="hello" />
   <Button Content="hello" />
   <Button Content="hello" />
</StackPanel>

কোনও প্যানেলের একই ধরণের না হলেও, মার্জিনকে প্যানেলের বেশ কয়েকটি সন্তানের কাছে সেট করার এটি সবচেয়ে সহজ এবং দ্রুততম উপায়। (অর্থাত্ বোতাম, পাঠ্যবক্স, কম্বোবক্স, ইত্যাদি)

Comments

এটি সম্পর্কে একটি দুর্দান্ত আকর্ষণীয় উপায়। আপনি কীভাবে স্থান পরিবর্তন করতে চান সে সম্পর্কে এটি প্রচুর অনুমান করে এবং এমনকি আপনাকে প্রথম / শেষ আইটেমগুলিতে স্বয়ংক্রিয়ভাবে মার্জিনগুলি সামঞ্জস্য করার সুযোগ দেয়।

— আর্মেন্টেজ

বহুমুখিতা জন্য +1। এছাড়াও ব্লগ পোস্টে উন্নতি করার if (fe.ReadLocalValue(FrameworkElement.MarginProperty) == DependencyProperty.UnsetValue)জন্য, সন্তানের মার্জিনটি সেট করার আগে যুক্ত করে এটি কিছু উপাদানগুলির জন্য ম্যানুয়ালি মার্জিন নির্দিষ্ট করতে দেয়।

— জেরিলিও

মনে রাখবেন যে যদি শিশু আইটেমগুলি গতিশীলভাবে যুক্ত / সরানো হয়, যেমন কোনও পরিবর্তিত সংগ্রহে আবদ্ধ আইটেমসন্ট্রোলগুলিতে এটি কাজ করে না।

— ড্রয় নোকস

যদি এটি কাজ না করে: প্রকল্পটি তৈরি করুন, অন্যথায় এটি পৃষ্ঠাটি রেন্ডার করবে না।

— যুদ্ধ

লিংক ভেঙে গেছে!

— ডেভ

Answer 3

আমি এলাদ কাটজের উত্তরে উন্নতি করেছি ।

• শেষ আইটেমটি বিশেষভাবে পরিচালনা করতে মার্জিনসেটরে লাস্ট আইটেমমার্গিন সম্পত্তি যুক্ত করুন
• উল্লম্ব এবং অনুভূমিক বৈশিষ্ট্যগুলির সাথে স্পেসিং সংযুক্ত বৈশিষ্ট্য যুক্ত করুন যা উল্লম্ব এবং অনুভূমিক তালিকার আইটেমগুলির মধ্যে ব্যবধান যোগ করে এবং তালিকার শেষে যে কোনও পিছনের মার্জিনকে সরিয়ে দেয়

সারকথা মধ্যে সোর্স কোড ।

উদাহরণ:

<StackPanel Orientation="Horizontal" foo:Spacing.Horizontal="5">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</StackPanel>

<StackPanel Orientation="Vertical" foo:Spacing.Vertical="5">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</StackPanel>

<!-- Same as vertical example above -->
<StackPanel Orientation="Vertical" foo:MarginSetter.Margin="0 0 0 5" foo:MarginSetter.LastItemMargin="0">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</StackPanel>

Comments

এলাদের উত্তরের মতো, যদি শিশু আইটেমগুলি গতিশীলভাবে যুক্ত / সরানো হয়, যেমন ItemsControlকোনও পরিবর্তিত সংগ্রহে আবদ্ধ থাকে তবে এটি কাজ করে না । এটি ধরে নিয়েছে যে পিতামাতার Loadইভেন্টের আগুনের মুহুর্ত থেকেই আইটেমগুলি স্থিতিশীল ।

— ড্রয় নোকস

এছাড়াও, আপনার বক্তব্য একটি 404 দেয়

— ড্রু নোকস

সংক্ষেপে আপডেট লিঙ্ক।

— অ্যাঙ্গুলারসেন

Answer 4

আপনি যা করতে চান তা হ'ল সমস্ত শিশু উপাদানকে মোড়ানো। এক্ষেত্রে আপনার আইটেম নিয়ন্ত্রণ ও ব্যবহার করা উচিত এবং ভয়াবহ সংযুক্ত বৈশিষ্ট্যগুলি অবলম্বন করা উচিত নয় যা আপনি স্টাইল করতে চান এমন প্রতিটি সম্পত্তির জন্য মিলিয়ন পাবে।

<ItemsControl>

    <!-- target the wrapper parent of the child with a style -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="Control">
            <Setter Property="Margin" Value="0 0 5 0"></Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- use a stack panel as the main container -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- put in your children -->
    <ItemsControl.Items>
        <Label>Auto Zoom Reset?</Label>
        <CheckBox x:Name="AutoResetZoom"/>
        <Button x:Name="ProceedButton" Click="ProceedButton_OnClick">Next</Button>
        <ComboBox SelectedItem="{Binding LogLevel }" ItemsSource="{Binding LogLevels}" />
    </ItemsControl.Items>
</ItemsControl>

Comments

দুর্দান্ত টিপ, তবে এটি "ফ্রেমওয়ার্কএলমেন্ট" হিসাবে স্টাইল টার্গেটটাইপের সাথে আরও ভাল কাজ করে (অন্যথায় এটি চিত্রের জন্য কাজ করে না, উদাহরণস্বরূপ)

— পাফিন

আমি এই ধারনাটি পছন্দ করি. কেবল একটি সংযোজন: স্ট্যাকপ্যানেলের ( Margin="0 0 -5 0")) এর মার্জিন থেকে ব্যবধানের পরিমাণ বিয়োগ করাও তালিকার শেষ আইটেমের পরে ব্যবধানের বিরোধিতা করবে।

— লেবেল

এটির সাথে সমস্যা হ'ল আপনি যে স্টাইলটি সেট করেছেন সেগুলি আইটেমগুলিতে ইতিমধ্যে থাকতে পারে এমন অন্য কোনও স্টাইলকে ওভাররাইড করবে। এটি কাটিয়ে উঠতে এই সম্পর্কিত প্রশ্নটি / গৃহীত উত্তরগুলি এখানে দেখুন

— waxingsatirical

Answer 5

সের্গির উত্তরের জন্য +1। এবং আপনি যদি এটি আপনার সমস্ত স্ট্যাকপ্যানেলে প্রয়োগ করতে চান তবে আপনি এটি করতে পারেন:

<Style TargetType="{x:Type StackPanel}">
    <Style.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="{StaticResource tbMargin}"/>
        </Style>
    </Style.Resources>
</Style>

তবে সাবধান হন: আপনি যদি আপনার অ্যাপ.এক্সএএমএল (বা অ্যাপ্লিকেশনটিতে সংযুক্ত অন্য কোনও অভিধান। উত্স) এর মতো একটি শৈলীর সংজ্ঞা দেন তবে এটি নিয়ন্ত্রণের ডিফল্ট স্টাইলকে ওভাররাইড করতে পারে । বেশিরভাগ স্ট্যাকপ্যানেলের মতো দৃষ্টিনন্দন নিয়ন্ত্রণের জন্য এটি কোনও সমস্যা নয়, তবে পাঠ্যবক্সগুলি ইত্যাদির জন্য আপনি এই সমস্যায় হোঁচট খেতে পারেন , যা ভাগ্যক্রমে কিছুটা কাজ রয়েছে।

Comments

<স্টাইল। রিসোর্সস> আপনি যখন এটি চেষ্টা করে ত্রুটি দেখিয়েছিলেন তখন কি কোজ সম্পর্কে নিশ্চিত হন?

— grv_9098

দুঃখিত, আমি হাতছাড়া মনে করতে পারি না। আমাকে এটি দেখতে চেষ্টা করতে হবে। আমি আপনি ফিরে পাবেন.

— আন্ড্রে লিউস

হ্যাঁ, এটি কাজ করে। স্ট্যাকপ্যানেলে সমস্ত পাঠ্যব্লকগুলিতে টেক্সটওয়েট = "বোল্ড" সেট করতে ঠিক একই কাজটি করেছেন। স্ট্যাকপ্যানেলে আমি স্পষ্টভাবে স্টাইলটি সেট করেছিলাম difference

— আন্দ্রে লুয়াস

আপনার উদ্বেগের জন্য ধন্যবাদ তবে আমার এখনও সন্দেহ আছে I এটি সম্পর্কে আমি জানি এটি এটিকে স্কোপ স্টাইল বলে। আমার ধারণা এটি <স্ট্যাকপ্যানেল.সম্পাদনা> হবে এবং <স্টাইল.সম্পাদনা> নয়। আপনি যদি আপনার কোড কোডটি পেস্ট করতে পারেন তবে এটি আরও দুর্দান্ত হবে ...

— grv_9098

Answer 6

সের্গির পরামর্শ অনুসরণ করে, আপনি কেবল একটি পুরুত্বের বস্তুর পরিবর্তে একটি সম্পূর্ণ স্টাইল (মার্জিন সহ বিভিন্ন সম্পত্তি সেটটার সহ) সংজ্ঞায়িত ও পুনরায় ব্যবহার করতে পারেন:

<Style x:Key="MyStyle" TargetType="SomeItemType">
  <Setter Property="Margin" Value="0,5,0,5" />
  ...
</Style>

...

  <StackPanel>
    <StackPanel.Resources>
      <Style TargetType="SomeItemType" BasedOn="{StaticResource MyStyle}" />
    </StackPanel.Resources>
  ...
  </StackPanel>

নোট করুন যে এখানে কৌশলটি অন্তর্নিহিত শৈলীর জন্য স্টাইল উত্তরাধিকারের ব্যবহার, কিছু বাহ্যিক (সম্ভবত বাহ্যিক এক্সএএমএল ফাইল থেকে সংযুক্ত) সংস্থানীয় অভিধানে স্টাইল থেকে উত্তরাধিকার সূত্রে প্রাপ্ত।

সাইড নোট:

প্রথমে, আমি নির্লিপ্তভাবে নিয়ন্ত্রণের স্টাইল বৈশিষ্ট্যটিকে বাইরের স্টাইল সংস্থার (কী "মাইস্টাইল" কী দ্বারা সংজ্ঞায়িত করা বলুন) সেট করার জন্য অন্তর্নিহিত শৈলীটি ব্যবহার করার চেষ্টা করেছি:

<StackPanel>
  <StackPanel.Resources>
    <Style TargetType="SomeItemType">
      <Setter Property="Style" Value={StaticResource MyStyle}" />
    </Style>
  </StackPanel.Resources>
</StackPanel>

যার ফলে ভিজ্যুয়াল স্টুডিও ২০১০ CATSTROPHIC ব্যর্থ ত্রুটির সাথে তাত্ক্ষণিকভাবে বন্ধ হয়ে গিয়েছিল (এইচআরসিলেট: 0x8000FFFF (E_UNEXPECTED)), যেমন https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails এ বর্ণিত -সঙ্গে-সর্বনাশা-ব্যর্থতা-যখন-একটি-শৈলী-চেষ্টা-টু-সেট-শৈলী-সম্পত্তি #

Answer 7

গ্রিড.ক্লোনমস্পেসিং , গ্রিড.রোস্পেসিং , স্ট্যাকপ্যানেল.স্পেসিং এখন ইউডাব্লুপি পূর্বরূপে রয়েছে, সকলে এখানে অনুরোধ করা বিষয়টিকে আরও ভালভাবে সম্পাদন করার অনুমতি দেবে।

এই বৈশিষ্ট্যগুলি বর্তমানে কেবল উইন্ডোজ 10 ফল ক্রিয়েটর আপডেট ইনসাইডার এসডিকে দিয়ে উপলভ্য, তবে এটি চূড়ান্ত বিটগুলিতে করা উচিত!

Answer 8

ইউনিফর্মগ্রিডটি সিলভারলাইটে উপলভ্য নয়, তবে কেউ ডাব্লুপিএফ থেকে এটি পোর্ট করেছেন। http://www.jeff.wilcox.name/2009/01/uniform-grid/

Answer 9

আমার পদ্ধতির স্ট্যাকপ্যানেল উত্তরাধিকার সূত্রে প্রাপ্ত।

ব্যবহার:

<Controls:ItemSpacer Grid.Row="2" Orientation="Horizontal" Height="30" CellPadding="15,0">
    <Label>Test 1</Label>
    <Label>Test 2</Label>
    <Label>Test 3</Label>
</Controls:ItemSpacer>

যা দরকার তা হ'ল নিম্নলিখিত সংক্ষিপ্ত শ্রেণি:

using System.Windows;
using System.Windows.Controls;
using System;

namespace Controls
{
    public class ItemSpacer : StackPanel
    {
        public static DependencyProperty CellPaddingProperty = DependencyProperty.Register("CellPadding", typeof(Thickness), typeof(ItemSpacer), new FrameworkPropertyMetadata(default(Thickness), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnCellPaddingChanged));
        public Thickness CellPadding
        {
            get
            {
                return (Thickness)GetValue(CellPaddingProperty);
            }
            set
            {
                SetValue(CellPaddingProperty, value);
            }
        }
        private static void OnCellPaddingChanged(DependencyObject Object, DependencyPropertyChangedEventArgs e)
        {
            ((ItemSpacer)Object).SetPadding();
        }

        private void SetPadding()
        {
            foreach (UIElement Element in Children)
            {
                (Element as FrameworkElement).Margin = this.CellPadding;
            }
        }

        public ItemSpacer()
        {
            this.LayoutUpdated += PART_Host_LayoutUpdated;
        }

        private void PART_Host_LayoutUpdated(object sender, System.EventArgs e)
        {
            this.SetPadding();
        }
    }
}

Answer 10

কখনও কখনও আপনার প্যাডিং সেট করতে হবে, ডিফল্টের চেয়ে ছোট আইটেমগুলির মধ্যে স্থান তৈরি করার জন্য মার্জিন নয়