نمایش نتایج 1 تا 40 از 1757

نام تاپیک: طراحی رابط کاربری - UserInterface

Hybrid View

پست قبلی پست قبلی   پست بعدی پست بعدی
  1. #1

    نقل قول: طراحی ظاهر برنامه UserInterface

    نقل قول نوشته شده توسط NasimBamdad مشاهده تاپیک
    برنامه هایی که می نویسم معمولا خیلی دقت می کنم و به نظر خودم کد نویسی خوبی داره


    اما ظاهر خوبی ندارن ، حتما عکس می ذارم ببینم دوستان چی میگن

    راستی ، دوست دارم بدونم اون Title بار به اون خوشگلی چه طوری باید ساخت .

    ای کاش آموزش هم بود
    بفرمایید خدمت شما کد xaml قسمت هدر فرم:



    <Grid
    x:Name='gridHeader'
    HorizontalAlignment='Stretch'
    Margin='0'
    VerticalAlignment='Top'
    Width='Auto'
    Background='{x:Null}'>


    <!--******************** Window Title ************************-->
    <Grid
    Grid.Row='0'
    HorizontalAlignment='Stretch'
    VerticalAlignment='Top'
    Height='45'
    x:Name='gridMainTitle'>
    <Grid.ColumnDefinitions>
    <ColumnDefinition
    Width='auto' />
    <ColumnDefinition
    Width='auto' />
    <ColumnDefinition
    Width='auto' />
    <ColumnDefinition
    Width='*' />
    <ColumnDefinition
    Width='auto' />
    </Grid.ColumnDefinitions>

    <Rectangle
    Grid.Column='4'
    HorizontalAlignment='Right'
    VerticalAlignment='Bottom'
    Height='5'
    Width='60'
    Margin='0 0 0 0'
    Fill='Red'
    x:Name='subtitleShadow1'
    Visibility='Visible'>
    <Rectangle.Effect>
    <DropShadowEffect
    Direction='-90'
    Opacity='0.4'
    ShadowDepth='2'
    BlurRadius='6' />
    </Rectangle.Effect>
    </Rectangle>

    <Rectangle
    x:Name='headerbg'
    Grid.ColumnSpan='6'
    Fill='#FF2C3E50'
    Height='45'
    Stroke='{x:Null}'
    StrokeThickness='0'
    VerticalAlignment='Top' />


    <!-- SwipeMenuButton -->
    <ToggleButton
    x:Name='SwipeMenuButton'
    Cursor='Hand'
    Width='45'
    Background='Transparent'
    IsChecked='{Binding Path=SwipeMenuVisibility, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}'
    Margin='0 1 0 0'>
    <ToggleButton.Template>
    <ControlTemplate
    TargetType='ToggleButton'>
    <Grid
    Background='Transparent'>
    <StackPanel
    Background='Transparent'
    Orientation='Vertical'
    VerticalAlignment='Center'
    HorizontalAlignment='Center'>
    <Rectangle
    Fill='#fff'
    Width='19'
    Height='2'
    Margin='0 0 0 0' />
    <Rectangle
    Fill='#fff'
    Width='19'
    Height='2'
    Margin='0 4 0 0' />
    <Rectangle
    Fill='#fff'
    Width='19'
    Height='2'
    Margin='0 4 0 0' />
    </StackPanel>
    </Grid>
    </ControlTemplate>
    </ToggleButton.Template>

    </ToggleButton>
    <!-- - Window Icon - -->



    <!-- Window Icon -->
    <Grid
    x:Name='gridIcon'
    Grid.Column='1'
    HorizontalAlignment='Left'
    Height='55'
    Margin='10 10 0 -20'
    VerticalAlignment='Top'
    Width='55'>

    <Ellipse
    Fill='#FFECF0F1'
    HorizontalAlignment='Left'
    Height='55'
    Margin='0'
    Stroke='{x:Null}'
    VerticalAlignment='Top'
    Width='55'
    StrokeThickness='0'
    Grid.RowSpan='1'>
    <Ellipse.Effect>
    <DropShadowEffect
    BlurRadius='9'
    Opacity='0.7'
    Direction='0'
    ShadowDepth='0' />
    </Ellipse.Effect>
    </Ellipse>
    <Image
    Source='{TemplateBinding Icon}'
    Width='31'
    Height='31' />
    </Grid>
    <!-- - Window Icon - -->

    <!-- Window Main Title Text -->
    <TextBlock
    x:Name='txtMainTitle'
    Grid.Column='3'
    FontFamily='segoe ui'
    HorizontalAlignment='Left'
    Foreground='White'
    FontSize='13'
    FontWeight='Bold'
    Margin='29 0 0 0'
    VerticalAlignment='Center'
    Text='{TemplateBinding Title}' />
    <!-- - Window Main Title Text - -->

    <!-- Window Control Box -->
    <Grid
    Grid.Column='4'>
    <Button
    x:Name='btnMinimize'
    Width='50'
    Background='#FF2C3E50'
    HorizontalAlignment='Right'
    Margin='0,0,51,0'
    HorizontalContentAlignment='Center'
    Cursor='Hand'>
    <Button.Template>
    <ControlTemplate
    TargetType='{x:Type Button}'>
    <Grid>
    <Path
    x:Name='bg'
    Data='M 70,0 10,0 0,45 60,45 Z'
    Fill='{TemplateBinding Background}'
    HorizontalAlignment='Left'
    Height='45'
    Stretch='Fill'
    Stroke='{x:Null}'
    StrokeThickness='0'
    VerticalAlignment='Top'
    Width='60' />
    <ContentPresenter />
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger
    Property='IsMouseOver'
    Value='True'>
    <Trigger.EnterActions>
    <BeginStoryboard>
    <Storyboard
    Storyboard.TargetName='bg'
    Storyboard.TargetProperty='Fill.Color'>
    <ColorAnimation
    Duration='0:0:0.2'
    To='#34495e' />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
    <BeginStoryboard>
    <Storyboard
    Storyboard.TargetName='bg'
    Storyboard.TargetProperty='Fill.Color'>
    <ColorAnimation
    Duration='0:0:0.1'
    To='#2c3e50' />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.ExitActions>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Button.Template>
    <Rectangle
    Fill='#FFFFFFFF'
    Height='2'
    Width='12'
    Margin='0,6,0,0'
    VerticalAlignment='Center'
    HorizontalAlignment='Center' />
    </Button>
    <Button
    x:Name='btnQuit'
    Background='#fa2653'
    BorderThickness='0'
    BorderBrush='{x:Null}'
    HorizontalAlignment='Right'
    Cursor='Hand'>
    <Button.Template>
    <ControlTemplate
    TargetType='{x:Type Button}'>
    <Grid>
    <Path
    x:Name='bg'
    Data='M 10,0 70,0 70,45 0,45 10,0 Z'
    Fill='{TemplateBinding Background}'
    HorizontalAlignment='Left'
    Height='45'
    Stretch='Fill'
    Stroke='{x:Null}'
    StrokeThickness='0'
    VerticalAlignment='Top'
    Width='60' />
    <ContentPresenter />
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger
    Property='IsMouseOver'
    Value='True'>
    <Trigger.EnterActions>
    <BeginStoryboard>
    <Storyboard
    Storyboard.TargetName='bg'
    Storyboard.TargetProperty='Fill.Color'>
    <ColorAnimation
    Duration='0:0:0.2'
    To='#ff4f31' />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
    <BeginStoryboard>
    <Storyboard
    Storyboard.TargetName='bg'
    Storyboard.TargetProperty='Fill.Color'>
    <ColorAnimation
    Duration='0:0:0.1'
    To='#fa2653' />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.ExitActions>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Button.Template>
    <Path
    Data='M72.0101,0C90.4433,2E-06,108.882,7.01784,122.949,21.0535L384.892,282.359 646.792,21.0535C674.927,-7.01784 720.547,-7.01784 748.683,21.0535 776.775,49.1265 776.775,94.5986 748.64,122.67L486.74,383.975 748.683,645.324C776.818,673.397 776.775,718.89 748.683,746.962 720.547,775.002 674.927,775.023 646.792,746.962L384.892,485.635 122.949,746.962C94.814,775.023 49.1957,775.002 21.1022,746.962 -7.03405,718.89 -7.03405,673.397 21.1022,645.324L283.001,384.018 21.1022,122.67C-7.03405,94.5986 -7.03405,49.1265 21.1022,21.0535 35.1489,7.01784 53.5769,2E-06 72.0101,0z'
    Stretch='Uniform'
    Fill='#FFFFFFFF'
    Width='12'
    Height='Auto'
    Margin='0,0,-5,0'
    RenderTransformOrigin='0.5,0.5'
    VerticalAlignment='Center'
    HorizontalAlignment='Center' />
    </Button>
    </Grid>
    <!-- - Window Control Box - -->
    </Grid>
    <!--____________________ Window Title _________________________-->

    </Grid>


  2. #2
    کاربر دائمی
    تاریخ عضویت
    تیر 1390
    محل زندگی
    کرمانشاه
    پست
    1,487

    نقل قول: طراحی ظاهر برنامه UserInterface

    نقل قول نوشته شده توسط Mori Bone مشاهده تاپیک
    بفرمایید خدمت شما کد xaml قسمت هدر فرم:



    <Grid
    x:Name='gridHeader'
    HorizontalAlignment='Stretch'
    Margin='0'
    VerticalAlignment='Top'
    Width='Auto'
    Background='{x:Null}'>


    <!--******************** Window Title ************************-->
    <Grid
    Grid.Row='0'
    HorizontalAlignment='Stretch'
    VerticalAlignment='Top'
    Height='45'
    x:Name='gridMainTitle'>
    <Grid.ColumnDefinitions>
    <ColumnDefinition
    Width='auto' />
    <ColumnDefinition
    Width='auto' />
    <ColumnDefinition
    Width='auto' />
    <ColumnDefinition
    Width='*' />
    <ColumnDefinition
    Width='auto' />
    </Grid.ColumnDefinitions>

    <Rectangle
    Grid.Column='4'
    HorizontalAlignment='Right'
    VerticalAlignment='Bottom'
    Height='5'
    Width='60'
    Margin='0 0 0 0'
    Fill='Red'
    x:Name='subtitleShadow1'
    Visibility='Visible'>
    <Rectangle.Effect>
    <DropShadowEffect
    Direction='-90'
    Opacity='0.4'
    ShadowDepth='2'
    BlurRadius='6' />
    </Rectangle.Effect>
    </Rectangle>

    <Rectangle
    x:Name='headerbg'
    Grid.ColumnSpan='6'
    Fill='#FF2C3E50'
    Height='45'
    Stroke='{x:Null}'
    StrokeThickness='0'
    VerticalAlignment='Top' />


    <!-- SwipeMenuButton -->
    <ToggleButton
    x:Name='SwipeMenuButton'
    Cursor='Hand'
    Width='45'
    Background='Transparent'
    IsChecked='{Binding Path=SwipeMenuVisibility, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}'
    Margin='0 1 0 0'>
    <ToggleButton.Template>
    <ControlTemplate
    TargetType='ToggleButton'>
    <Grid
    Background='Transparent'>
    <StackPanel
    Background='Transparent'
    Orientation='Vertical'
    VerticalAlignment='Center'
    HorizontalAlignment='Center'>
    <Rectangle
    Fill='#fff'
    Width='19'
    Height='2'
    Margin='0 0 0 0' />
    <Rectangle
    Fill='#fff'
    Width='19'
    Height='2'
    Margin='0 4 0 0' />
    <Rectangle
    Fill='#fff'
    Width='19'
    Height='2'
    Margin='0 4 0 0' />
    </StackPanel>
    </Grid>
    </ControlTemplate>
    </ToggleButton.Template>

    </ToggleButton>
    <!-- - Window Icon - -->



    <!-- Window Icon -->
    <Grid
    x:Name='gridIcon'
    Grid.Column='1'
    HorizontalAlignment='Left'
    Height='55'
    Margin='10 10 0 -20'
    VerticalAlignment='Top'
    Width='55'>

    <Ellipse
    Fill='#FFECF0F1'
    HorizontalAlignment='Left'
    Height='55'
    Margin='0'
    Stroke='{x:Null}'
    VerticalAlignment='Top'
    Width='55'
    StrokeThickness='0'
    Grid.RowSpan='1'>
    <Ellipse.Effect>
    <DropShadowEffect
    BlurRadius='9'
    Opacity='0.7'
    Direction='0'
    ShadowDepth='0' />
    </Ellipse.Effect>
    </Ellipse>
    <Image
    Source='{TemplateBinding Icon}'
    Width='31'
    Height='31' />
    </Grid>
    <!-- - Window Icon - -->

    <!-- Window Main Title Text -->
    <TextBlock
    x:Name='txtMainTitle'
    Grid.Column='3'
    FontFamily='segoe ui'
    HorizontalAlignment='Left'
    Foreground='White'
    FontSize='13'
    FontWeight='Bold'
    Margin='29 0 0 0'
    VerticalAlignment='Center'
    Text='{TemplateBinding Title}' />
    <!-- - Window Main Title Text - -->

    <!-- Window Control Box -->
    <Grid
    Grid.Column='4'>
    <Button
    x:Name='btnMinimize'
    Width='50'
    Background='#FF2C3E50'
    HorizontalAlignment='Right'
    Margin='0,0,51,0'
    HorizontalContentAlignment='Center'
    Cursor='Hand'>
    <Button.Template>
    <ControlTemplate
    TargetType='{x:Type Button}'>
    <Grid>
    <Path
    x:Name='bg'
    Data='M 70,0 10,0 0,45 60,45 Z'
    Fill='{TemplateBinding Background}'
    HorizontalAlignment='Left'
    Height='45'
    Stretch='Fill'
    Stroke='{x:Null}'
    StrokeThickness='0'
    VerticalAlignment='Top'
    Width='60' />
    <ContentPresenter />
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger
    Property='IsMouseOver'
    Value='True'>
    <Trigger.EnterActions>
    <BeginStoryboard>
    <Storyboard
    Storyboard.TargetName='bg'
    Storyboard.TargetProperty='Fill.Color'>
    <ColorAnimation
    Duration='0:0:0.2'
    To='#34495e' />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
    <BeginStoryboard>
    <Storyboard
    Storyboard.TargetName='bg'
    Storyboard.TargetProperty='Fill.Color'>
    <ColorAnimation
    Duration='0:0:0.1'
    To='#2c3e50' />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.ExitActions>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Button.Template>
    <Rectangle
    Fill='#FFFFFFFF'
    Height='2'
    Width='12'
    Margin='0,6,0,0'
    VerticalAlignment='Center'
    HorizontalAlignment='Center' />
    </Button>
    <Button
    x:Name='btnQuit'
    Background='#fa2653'
    BorderThickness='0'
    BorderBrush='{x:Null}'
    HorizontalAlignment='Right'
    Cursor='Hand'>
    <Button.Template>
    <ControlTemplate
    TargetType='{x:Type Button}'>
    <Grid>
    <Path
    x:Name='bg'
    Data='M 10,0 70,0 70,45 0,45 10,0 Z'
    Fill='{TemplateBinding Background}'
    HorizontalAlignment='Left'
    Height='45'
    Stretch='Fill'
    Stroke='{x:Null}'
    StrokeThickness='0'
    VerticalAlignment='Top'
    Width='60' />
    <ContentPresenter />
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger
    Property='IsMouseOver'
    Value='True'>
    <Trigger.EnterActions>
    <BeginStoryboard>
    <Storyboard
    Storyboard.TargetName='bg'
    Storyboard.TargetProperty='Fill.Color'>
    <ColorAnimation
    Duration='0:0:0.2'
    To='#ff4f31' />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
    <BeginStoryboard>
    <Storyboard
    Storyboard.TargetName='bg'
    Storyboard.TargetProperty='Fill.Color'>
    <ColorAnimation
    Duration='0:0:0.1'
    To='#fa2653' />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.ExitActions>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Button.Template>
    <Path
    Data='M72.0101,0C90.4433,2E-06,108.882,7.01784,122.949,21.0535L384.892,282.359 646.792,21.0535C674.927,-7.01784 720.547,-7.01784 748.683,21.0535 776.775,49.1265 776.775,94.5986 748.64,122.67L486.74,383.975 748.683,645.324C776.818,673.397 776.775,718.89 748.683,746.962 720.547,775.002 674.927,775.023 646.792,746.962L384.892,485.635 122.949,746.962C94.814,775.023 49.1957,775.002 21.1022,746.962 -7.03405,718.89 -7.03405,673.397 21.1022,645.324L283.001,384.018 21.1022,122.67C-7.03405,94.5986 -7.03405,49.1265 21.1022,21.0535 35.1489,7.01784 53.5769,2E-06 72.0101,0z'
    Stretch='Uniform'
    Fill='#FFFFFFFF'
    Width='12'
    Height='Auto'
    Margin='0,0,-5,0'
    RenderTransformOrigin='0.5,0.5'
    VerticalAlignment='Center'
    HorizontalAlignment='Center' />
    </Button>
    </Grid>
    <!-- - Window Control Box - -->
    </Grid>
    <!--____________________ Window Title _________________________-->

    </Grid>

    سلام

    این برای WinForm هم میشه ؟ یا فقط WPF ?

  3. #3

    نقل قول: طراحی ظاهر برنامه UserInterface

    نقل قول نوشته شده توسط NasimBamdad مشاهده تاپیک
    سلام

    این برای WinForm هم میشه ؟ یا فقط WPF ?
    این کده xaml هست ک فقط میتونید توی wpf استفاده کنید

تاپیک های مشابه

  1. پاسخ: 2
    آخرین پست: دوشنبه 14 دی 1394, 13:16 عصر
  2. آموزش: طراحی رابط کاربری پروژه + سورس
    نوشته شده توسط birtemp در بخش WPF
    پاسخ: 6
    آخرین پست: شنبه 26 مرداد 1392, 00:45 صبح
  3. پاسخ: 2
    آخرین پست: شنبه 26 فروردین 1391, 16:51 عصر
  4. طراحی رابط کاربری نرم افزار هایتان به چه شکل است ؟
    نوشته شده توسط sara66 در بخش مباحث عمومی دلفی و پاسکال
    پاسخ: 8
    آخرین پست: دوشنبه 05 دی 1390, 18:34 عصر
  5. طراحی رابط کاربری GUI
    نوشته شده توسط linux در بخش VB.NET
    پاسخ: 2
    آخرین پست: پنج شنبه 20 بهمن 1384, 20:05 عصر

برچسب های این تاپیک

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •