ko444evnik (ko444evnik) wrote,
ko444evnik
ko444evnik

Layout "Галактико"

К дискуссии о layout типа "Свастика", которая шла здесь: http://thesz.livejournal.com/1184405.html?thread=10046101#t10046101 написал несколько расширенный его вариант.

как полагается - c "внутренними" подвижными сплиттерами и с "внешним" глобально-масштабирующим слайдером. необходимость именно такого поведения мотивирована тем, что "заказчик захотел".

этюд на тему "Программа обучения снайпера".

"свернутый" вариант при минимальном положении слайдера:






Собственно, опрос:

1. на каких еще языках+библиотеках это может быть реализовано?
2. за какое время?
3. необходимо ли "тесное взаимодействие" дизайнера и программиста при доработке продукта до кондиции?

мой вариант:
1. C#/WPF/xaml
2. 10 минут чертил на бумажке + 30 минут делал сам лайот (вернее переделывал из предыдущего прототипа) + еще какое то время сочинял текст и искал подходящую картинку.
3. на мой взгляд - нет.



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

  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="Auto" />
   <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <Slider Name="slyder"
   Grid.Column="0"
   Orientation="Vertical"
   Minimum="200"
   Maximum="500"
   Value="200"
   Ticks="10"
   TickPlacement="BottomRight"
   SmallChange="20"
   LargeChange="60"
   TickFrequency="20" />

  <Grid Grid.Column="1">
   
   <Grid.Resources>
    <Style
     TargetType="{x:Type TextBox}">
     <Setter
      Property="FontFamily"
      Value="Verdana" />
     <Setter
      Property="AcceptsReturn"
      Value="True" />
     <Setter
      Property="AcceptsTab"
      Value="True" />
     <Setter
      Property="TextWrapping"
      Value="Wrap" />
     <Setter
      Property="VerticalScrollBarVisibility"
      Value="Auto" />
    </Style>
    
    <Style
     x:Key="styleVertical"
     TargetType="{x:Type GridSplitter}">
     <Setter
      Property="Width"
      Value="6" />
     <Setter
      Property="HorizontalAlignment"
      Value="Center" />
     <Setter
      Property="VerticalAlignment"
      Value="Stretch" />
     <Setter
      Property="Background"
      Value="MediumAquamarine" />
    </Style>

    <Style
     x:Key="styleHorizontal"
     TargetType="{x:Type GridSplitter}">
     <Setter
      Property="Height"
      Value="6" />
     <Setter
      Property="HorizontalAlignment"
      Value="Stretch" />
     <Setter
      Property="VerticalAlignment"
      Value="Center" />
     <Setter
      Property="Background"
      Value="CadetBlue" />
    </Style>

   </Grid.Resources>

   <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
   </Grid.RowDefinitions>

   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="2*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="2*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

   <GridSplitter
    Name="α"
    Style="{StaticResource styleHorizontal}"
    Grid.Column="0"
    Grid.Row="1"
    Grid.ColumnSpan="5"
    HorizontalAlignment="Stretch" />

   <GridSplitter
    Name="β"
    Style="{StaticResource styleHorizontal}"
    Grid.Column="2"
    Grid.Row="3"
    Grid.ColumnSpan="3"
    HorizontalAlignment="Stretch" />

   <GridSplitter
    Name="γ"
    Style="{StaticResource styleHorizontal}"
    Grid.Column="4"
    Grid.Row="5"
    Grid.ColumnSpan="3"
    HorizontalAlignment="Stretch" />

   <GridSplitter
    Name="δ"
    Style="{StaticResource styleHorizontal}"
    Grid.Column="4"
    Grid.Row="7"
    Grid.ColumnSpan="5"
    HorizontalAlignment="Stretch" />

   <GridSplitter
    Name="ε"
    Style="{StaticResource styleVertical}"
    Grid.Column="1"
    Grid.Row="2"
    Grid.RowSpan="7" />
   
   <GridSplitter
    Name="ζ"
    Style="{StaticResource styleVertical}"
    Grid.Column="3"
    Grid.Row="4"
    Grid.RowSpan="5" />
   
   <GridSplitter
    Name="η"
    Style="{StaticResource styleVertical}"
    Grid.Column="5"
    Grid.Row="0"
    Grid.RowSpan="5" />
   
   <GridSplitter
    Name="θ"
    Style="{StaticResource styleVertical}"
    Grid.Column="7"
    Grid.Row="0"
    Grid.RowSpan="7" />

   <TextBox Name="B"
    Grid.Column="2"
    Grid.Row="2"
    Grid.ColumnSpan="3" >
    широкоугольная панорама местности
   </TextBox>

   <TextBox
    Name="C"
    Grid.Column="2"
    Grid.Row="4"
    Grid.RowSpan="5">
→дальность
→превышение
→температура воздуха
→тип патрона
→износ ствола
   </TextBox>

   <TextBox
    Name="D"
    Grid.Column="4"
    Grid.Row="6"
    Grid.ColumnSpan="3">
    блэкджек ♠♣♥♦
   </TextBox>

   <TextBox
    Name="E"
    Grid.Column="6"
    Grid.Row="0"
    Grid.RowSpan="5">
композитная поправка:
→значение
флажки на местности:
→координаты
→сила ветра    
   </TextBox>

   <TextBox
    Name="F"
    Grid.Column="0"
    Grid.Row="0"
    Grid.ColumnSpan="5">
    → внешние сигналы (запрет стрельбы, наличие питания, и т.д.)
   </TextBox>

   <TextBox
    Name="G"
    Grid.Column="0"
    Grid.Row="2"
    Grid.RowSpan="7">
    чекбоксы сигнализируюшие о подключенном оборудовании:
    →ИК камера
    →ЛЦУ
    →вибромассаж кресла
    →чесалка для спины
   </TextBox>

   <TextBox
    Name="H"
    Grid.Column="4"
    Grid.Row="8"
    Grid.ColumnSpan="5">
    шл... чат с любимой девушкой
   </TextBox>

   <TextBox
    Name="I"
    Grid.Column="8"
    Grid.Row="0"
    Grid.RowSpan="7">
→карта местности от точки стрельбы до цели с обозначенными флажками    
   </TextBox>
   
   <Grid
    Name="A"
    Grid.Column="4"
    Grid.Row="4"
    Width="{Binding ElementName=slyder, Path=Value}"
    Height="{Binding ElementName=slyder, Path=Value}"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch" >
    <Viewbox>
     <Image Source="usp1_3.jpg" />
    </Viewbox>
   </Grid>

  </Grid>
 </Grid>




чтобы посмотреть инструмент вживую:
1 Ctrl-C
1 Ctrl-V
1 "Save as" .xaml в UTF8
1 "Open with" "Internet Explorer"

P.S. картинку взял отсюда:
http://www.ak-info.ru/devices/usp1/usp1_3.jpg

Tags: .net, .wpf, графика
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments