locked
Design Idea for following window Title type RRS feed

  • Question

  • Hi All,

    How can i design following window title , the Logo has Image which is as long as the yellow portion in the image


    Sincerely, dhampall Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, June 4, 2013 7:33 AM

Answers

  • Ok here's a quick concept example, would have answered you earlier but only have so much free time to do other peoples work for them :P

    <Grid VerticalAlignment="Top" Background="#FF000066">
       <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>    
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
       </Grid.ColumnDefinitions>
       
       <Border Grid.RowSpan="2" Background="Orange" Margin="10">
        <TextBlock Text="LOGO" HorizontalAlignment="Center" VerticalAlignment="Center"/>
       </Border>
       
       <Border Grid.Column="2" Background="Orange" Margin="10" HorizontalAlignment="Center">
        <TextBlock Text="TITLE" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="25,0"/>
       </Border>
       
       <Path Grid.Row="1" Grid.Column="1"
          Data="M107.5,0.5 L109.5,0.51417875 L109.5,31.5 L0.56553155,31.5 L0.53494632,31.274315 C0.51169652,
            31.017 0.50000083,30.758884 0.5,30.5 C0.50000083,13.931459 48.405533,0.50000143 107.5,0.5 z"
          Fill="White" Stretch="Fill"/>
       <Rectangle Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Fill="White"/>
       
       <Border Grid.Column="3" Background="Orange" Margin="10" HorizontalAlignment="Center">
        <StackPanel Orientation="Horizontal">
        <TextBlock Text="Buttons" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0"/>
        <!-- For the Buttons you'll just have to make your own icons and stuff then you can tie into their
             methods something like for an example -->
         <Button Content="X">
             <i:Interaction.Triggers>
               <i:EventTrigger EventName="Click">
                 <ei:CallMethodAction
                     TargetObject="{Binding ElementName=window}"
                     MethodName="Close"/>
               </i:EventTrigger>
             </i:Interaction.Triggers>
           </Button>
        </StackPanel>
       </Border>
       
       <Border Grid.Row="2" Grid.Column="2" Background="Orange" Margin="10" HorizontalAlignment="Left">
        <TextBlock Text="MENU" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="25,0"/>
       </Border>
       
       <Border Grid.Row="2" Grid.Column="3" Background="Orange" Margin="10">
        <TextBlock Text="Search" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0"/>
       </Border>
       
      </Grid>





    Please mark answers as helpful when used, and answered when completed.

    • Marked as answer by dhampall_79 Wednesday, June 5, 2013 11:38 AM
    Tuesday, June 4, 2013 9:24 PM

All replies

  • Are you wanting to know how to do it in XAML? SL/WPF/WP?




    Please mark answers as helpful when used, and answered when completed.

    Tuesday, June 4, 2013 2:08 PM
  • In XAML WPF

    Sincerely, dhampall Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, June 4, 2013 2:40 PM
  • Ok here's a quick concept example, would have answered you earlier but only have so much free time to do other peoples work for them :P

    <Grid VerticalAlignment="Top" Background="#FF000066">
       <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>    
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
       </Grid.ColumnDefinitions>
       
       <Border Grid.RowSpan="2" Background="Orange" Margin="10">
        <TextBlock Text="LOGO" HorizontalAlignment="Center" VerticalAlignment="Center"/>
       </Border>
       
       <Border Grid.Column="2" Background="Orange" Margin="10" HorizontalAlignment="Center">
        <TextBlock Text="TITLE" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="25,0"/>
       </Border>
       
       <Path Grid.Row="1" Grid.Column="1"
          Data="M107.5,0.5 L109.5,0.51417875 L109.5,31.5 L0.56553155,31.5 L0.53494632,31.274315 C0.51169652,
            31.017 0.50000083,30.758884 0.5,30.5 C0.50000083,13.931459 48.405533,0.50000143 107.5,0.5 z"
          Fill="White" Stretch="Fill"/>
       <Rectangle Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Fill="White"/>
       
       <Border Grid.Column="3" Background="Orange" Margin="10" HorizontalAlignment="Center">
        <StackPanel Orientation="Horizontal">
        <TextBlock Text="Buttons" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0"/>
        <!-- For the Buttons you'll just have to make your own icons and stuff then you can tie into their
             methods something like for an example -->
         <Button Content="X">
             <i:Interaction.Triggers>
               <i:EventTrigger EventName="Click">
                 <ei:CallMethodAction
                     TargetObject="{Binding ElementName=window}"
                     MethodName="Close"/>
               </i:EventTrigger>
             </i:Interaction.Triggers>
           </Button>
        </StackPanel>
       </Border>
       
       <Border Grid.Row="2" Grid.Column="2" Background="Orange" Margin="10" HorizontalAlignment="Left">
        <TextBlock Text="MENU" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="25,0"/>
       </Border>
       
       <Border Grid.Row="2" Grid.Column="3" Background="Orange" Margin="10">
        <TextBlock Text="Search" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0"/>
       </Border>
       
      </Grid>





    Please mark answers as helpful when used, and answered when completed.

    • Marked as answer by dhampall_79 Wednesday, June 5, 2013 11:38 AM
    Tuesday, June 4, 2013 9:24 PM
  • Thanks it worked 

    Sincerely, dhampall Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, June 5, 2013 11:38 AM