قوانين و يا استانداردهايي در طراحي

[afsaneh.asp]

سلام
من چندتا پروژه طراحي كردم،مشكلي كه بعد از طراحي پيش مياد اينه كه با عوض كردن رزولوشن صفحه كمي باعث بهم ريختگي بعضي از جاها ميشه،مثلا اگه چندتا textblockو متني رو در يه گريد داشته باشم وقتي از اندازه ي پيش فرضي كه براي فرمم گذاشتم كوچيكتر بشه ، اين textblockها روي هم ميرن.

من تو 90 درصد طراحي هام height و width رو مقدار نميدم و تقريبا همه جا با تقسيم بندي هاي grid كار كردم.

ميخام بدونم كار من اشتباه بوده؟

آيا قوانيني در طراحي درست با xaml هستش؟
چه كارهايي رو انجام بدم بهتره؟ از چه كارهايي بايد پرهيز كنم؟

ممنون

[مهدی فرزاد]

سلام
WPF برای چیدمان کنترل ها در صفحه بسیار قوی شده
شما علاوه بر استفاده از Grid بر حسب لزوم میتونید از کنترل هایی مثل StackPanel , WrapPanel , DockPanel و .. استفاده کنید و ترکیبی از اینها در کنار یکدیگر
در ضمن شما در تظیمات هر کنترل گزینه هایی مثل HorizontalAlignment , VerticalAlignment و Margin دارید که باید به درستی از اونها استفاده کنید
در کنترل گرید هم اون سطر و ستون هایی رو که هنگام تغییر سایز صفحه ، نمیخواهید تغییر کنند در اصطلاح قفل کنید
این کار نیاز به تمرین و کسب تجربه در کار با این کنترل ها دارد
همچنین مناسب هست از کنترل ScrollViewer هم استفاده کنید
اگر یک نمونه از چیدمانی که با مشکل مواجه شدید رو قرار بدید من برای شما اصلاح میکنم و میتونید نتیجه رو مقایسه کنید .این میتونه تجربه خوبی باشه

[afsaneh.asp]

ممنون ،كد زير يكي از قسمت هايي هستش كه با تغيير رزولوشن صفحه بهم متن باتن ها روي هم ميوفته. اينجا با اين باتن ها يه منو ايجاد كردم.


<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="0.12*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="SteelBlue">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.8*"/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="1.2*"/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="1.2*"/>
<ColumnDefinition Width="0.8*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم یک" Command="{Binding Item1Command}" Template="{DynamicResource MyButton}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم دو" Command="{Binding Item2Command}" Template="{DynamicResource MyButton}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم سه" Command="{Binding Item3Command}" Template="{DynamicResource MyButton}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم چهار" Command="{Binding Item4Command}" Template="{DynamicResource MyButton}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم پنج" Command="{Binding Item5Command}" Template="{DynamicResource MyButton}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم شش" Command="{Binding Item1Command}" Template="{DynamicResource MyButton}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم هفت" Command="{Binding SubjectCommand}" Template="{DynamicResource MyButton}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Button Grid.Column="1" Content="آیتم هشت" Command="{Binding Item1Command}" Template="{DynamicResource MyButton}"/>
</Grid>
</Border>
</Grid>

[مهدی فرزاد]

سلام مجدد
ببینید دوست عزیز شما فقط اومدید یک گرید گذاشتید و تقسیم بندی کردید و همین جوری کنترل ها رو توش گذاشتید ولی به این نکته توجه نکردید که با کوچیک و بزرگ شدن عرض کار شما ستون های گرید هم کوچک میشن پس باید هر ستون رو قفل میکردید اگر از نرم افزار Blend برای طراحی استفاده کنید نتیجه ملموس تر هست

مثل شکل زیر

67262

البته در این چیدمان استفاده از کنترل گرید زیاد مناسب نیست بهتر از کتترل StackPanel استفاده کنید
من کد اصلاح شده روش شما و روش خودم رو هر دو رو میگذارم

این کد اصلاح شده شما
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.167*"/>
<RowDefinition Height="28.364"/>
<RowDefinition Height="0.833*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="SteelBlue">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="50.9"/>
<ColumnDefinition Width="50.9"/>
<ColumnDefinition Width="61.08"/>
<ColumnDefinition Width="50.88"/>
<ColumnDefinition Width="50.883"/>
<ColumnDefinition Width="50.877"/>
<ColumnDefinition Width="50.885"/>
<ColumnDefinition Width="60.949"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم یک" Command="{Binding Item1Command}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم دو" Command="{Binding Item2Command}" />
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم سه" Command="{Binding Item3Command}" />
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم چهار" Command="{Binding Item4Command}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم پنج" Command="{Binding Item5Command}" />
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم شش" Command="{Binding Item1Command}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Grid Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.18*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="آیتم هفت" Command="{Binding SubjectCommand}"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5">
<Separator.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
</Grid>
<Button Grid.Column="1" Content="آیتم هشت" Command="{Binding Item1Command}"/>
</Grid>
</Border>
</Grid>

اینم کد روش من

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.167*"/>
<RowDefinition Height="28.364"/>
<RowDefinition Height="0.833*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="SteelBlue">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Content="آیتم یک" Command="{Binding Item1Command}" Width="51.652" Margin="0"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5" Width="9">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
<Button Content="آیتم دو" Command="{Binding Item2Command}" Width="43.123" />
<Separator Background="Black" RenderTransformOrigin="0.5,0.5" Width="9">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
<Button Content="آیتم سه" Command="{Binding Item3Command}" Width="43.116" />
<Separator Background="Black" RenderTransformOrigin="0.5,0.5" Width="9">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
<Button Content="آیتم چهار" Command="{Binding Item4Command}" Width="43.121"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5" Width="9">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
<Button Content="آیتم پنج" Command="{Binding Item5Command}" Width="34.407" />
<Separator Background="Black" RenderTransformOrigin="0.5,0.5" Width="9" Margin="0,2">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
<Button Content="آیتم شش" Command="{Binding Item1Command}" Width="51.763"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5" Width="9">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
<Button Content="آیتم هفت" Command="{Binding SubjectCommand}" Width="43.136"/>
<Separator Background="Black" RenderTransformOrigin="0.5,0.5" Width="9">
<Separator.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Separator.RenderTransform>
</Separator>
<Button Content="آیتم هشت" Command="{Binding Item1Command}" HorizontalAlignment="Left" Height="28.364" Margin="0" Width="50.9"/>
</StackPanel>
</Border>
</Grid>