button دايره اي

[iranrose63]

سلام
با استفاده از wpf چه طوري ميشه به كنترل ها شكل هاي هندسي مختلف داد مثلا چه طور ميشه يه button بيضي شكل ايجاد كرد

***ویرایش شده توسط مدیر بخش - علیرضا مداح***
دوست عزیز لطفا" در هر تاپیک تنها یک سوال مطرح نمایید ،
باتشکر

ممنون

[Zaparo]

باید از Template ها استفاده کنی و این مورد یکی از مباحث جالب در WPF هست اینم یکی از Template های که من در پروژه WPF ازش استفاده کردم



<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="Silver" StrokeThickness="2">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="#FFFFFFFF" Offset="0.0"/>
<GradientStop Color="#99FFFFFF" Offset="0.2" />
<GradientStop Color="#44FFFFFF" Offset="0.3"/>
<GradientStop Color="#00FFFFFF" Offset="0.6" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter

[Mahdi.Kiani]

سلام
با استفاده از wpf چه طوري ميشه به كنترل ها شكل هاي هندسي مختلف داد مثلا چه طور ميشه يه button بيضي شكل ايجاد كرد

ممنون

سلام
اول اینکه بسیار خوشحالم که به سمت این تکنولوژی رفتید. اما چند تا نکته هست که حتما باید به اونا توجه کنید..
در WPF به هیچ عنوان به دنبال چنین سوالاتی نباش!!! چون از سوالی که پرسیدی مطمئنم که مطالعاتت در زمینه WPF کم بوده..

سخن کلی به شما دوست عزیز و همه دوستانی که می خواهند در این تکنولوژی وارد شوند، این است که مطالب را از پایه یاد بگیرید.
به عنوان مثال برای سوالی که شما پرسیدید چندین راه مختلف وجود داره. من قصد ندارم پاسخ سوالتون را بدم ( البته اگر خواستید این کار را خواهم کرد). بلکه قصدم این است که بگویم از پایه شروع کنید.
راه اول که خیلی ساده ولی نا کارامد است، استفاده از خاصیت Clip مربوط به عنصر Button می باشد.
راه دوم که کمی بهتر از اولی است، استفاده از کد های نوشته شده توسط دیگران و پیدا کردن آن ها بر روی نت می باشد..( این را هم توصیه نمی کنم)
راه سوم استفاده از نرم افزار هایی است که برای این منظور طراحی شده است ( نه فقط Button) که معروف ترین آن ها Expression Blend می باشد که به همراه برنامه های دیگری نظیر

Expression Web در بسته Microsoft Epression Studio قرار دارد. ( این را هم همیشه توصیه نمی کنم. چون باعث میشه که تنبل بشید)

راه چهارم که راه درست و کاملتری هم هست، و در پست قبل هم به آن اشاره مختصری شده است ( البته کد ناقص است) استفاده از Control Template می باشد.

و دلیل اینکه می گویم مفاهیم را از پایه یاد بگیرید، این است که بسیاری از مفاهیم به هم وابسته هستند، به عنوان مثال در استفاده از template ها نیاز به استفاده از Style ها خواهید داشت که خود مبحثی زیبا و مجزا در WPF می

باشد.
علاوه براین اگر بخواهید، رویداد هایی نظیر mouseEnter و ... را نیز پیاده سازی کنید، نیاز به استفاده از trigger ها خواهید داشت. که خودشون چند دسته می شوند ( EventTrigger ها،

properti Trigger ها و .. ) که هر کدام در جای خود مزایا و معایبی دارند.
علاوه بر این، مباحثی نظیر resource ها در طراحی کنترل های سفارشی پیش خواهند آمد. اینکه بهتر است یک template به صورت یک فایل resource Dictionary مجزا تعریف گردد، به

صورت Style درون خود Window تعریف گردد، در Application Resource ها تعریف شود و یا اینکه یک Custom Control باشد، همگی بنا با موقعیت و logic

برنامه شما فرق می کند.

پس می بینید، که در اینجا موضوع کمی فرق می کند، دلیلش هم این است که WPF اجازه دسترسی بسیاری را به شما بر خلاف تکنولوژی های قبلی می دهد.
به عنوان مثال اگر توسط VisualTreeHelper عناصر را بررسی کنید، خواهید دید که یک عنصر در متن وجودیش از چه قسمت هایی تشکیل شده است و این تکنولوژی اجازه دسترسی به شما را تا عمق یک کنترل می دهد( این

بزرگترین تفاوت نسبت به تکنولوژی های قبل می باشد) و به همین دلیل است که می توانید کنترل هایی بسیار قوی و با ظاهری دلخواه و متنوع برای خودتان ایجاد کنید.

پس حتما یکی دو کتاب در این زمینه مطالعه کنید و پس از اینکه کامل متوجه شدید که چه امکاناتی در اختیار شما قرار داده شده است، چه امکاناتی قرار داده نشده است، اقدام به تولید یک چنین کنترل هایی کنید.

در پایان هم یک نمونه بسیار ساده از یک Button سفارشی را که از طریق Template ها ایجاد شده است و یه کوچولو Animation در سایز فونت هم داره را براتون قرار میدم.
نمونه برنامه را هم در پایان پست می تونید دانلود کنید

کد button در قالب یک فایل resource Dictionray





<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


<RadialGradientBrush x:Key="DefaultBack" RadiusX="1" RadiusY="0.5" GradientOrigin="0.5,0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>


<LinearGradientBrush x:Key="MouseOverBack" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="MousePressedBack" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#00F0FF" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="Border" Color="Blue"></SolidColorBrush>


<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
<Border Name="ButtonBorder" BorderBrush="{StaticResource Border}" BorderThickness="2" CornerRadius="1,6,6,10" Background="{StaticResource DefaultBack}">
<Grid>
<ContentPresenter RecognizesAccessKey="True" Margin="{TemplateBinding Padding}"></ContentPresenter>
</Grid>
</Border>

<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="Background"
Value="{StaticResource MouseOverBack}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonBorder" Property="Background"
Value="{StaticResource MousePressedBack}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="CustomTemplatedButton" TargetType="{x:Type Button}">

<Setter Property="Template" Value="{StaticResource ButtonTemplate}">

</Setter>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="32" Duration="0:0:.3"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="FontSize" Duration="0:0:.4"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Triggers>
</Style>

</ResourceDictionary>



عکس در حالتNormal
http://i28.tinypic.com/ir2r6a.png

در حالت MouseOver
http://i27.tinypic.com/2my3hwo.png


در حالت Pressed
http://i25.tinypic.com/289itsk.png

موفق باشید

پ و :
چون حالت مربوط به Focus دکمه را حالشو نداشتم بنویسیم، و از مستطیل پیشرفضی هم که خود WPF در حالت Focus میکشه خوشم نمیاد، بنا براین خاصیت Focus مربوط به دکمه را false کردم.
شما می توانید برای حالت های Enable و Focus هم خودتون Style ها را تغییر بدید

[iranrose63]

ممنون آقاي كياني همونطور كه گفتيد من در اين زمينه تازه كارم و نتونستم از كد شما استفاده كنم در واقع اصلا نفهميدم بايد اونو كجا بنويسم اگه ميشه برام توضيح بديد

[Mahdi.Kiani]

ممنون آقاي كياني همونطور كه گفتيد من در اين زمينه تازه كارم و نتونستم از كد شما استفاده كنم در واقع اصلا نفهميدم بايد اونو كجا بنويسم اگه ميشه برام توضيح بديد

اون کد یک کلاس کامل است که یک template جدید برای Button ایجاد می کند.
شما با Refrence دادن به Style ای که در این کلاس می باشد، می توانید این قالب را برای هر Button ای که نیاز داشته باشید به کار ببرید.
نمونه برنامه را هم که اپلود کردم. دانلود کنید و کد را به دقت بررسی کنید تا متوجه ارنباط بین Resource ها شوید.
اگر باز هم مشکلی بود، بپرسید.
موفق باشید