design: 파일 목록 디자인 적용

prototype
HyungJune Kim 7 months ago
parent 6197df6be2
commit a63172f66c

@ -20,7 +20,7 @@
<ImageBrush ImageSource="./Resources/Images/background.png"></ImageBrush> <ImageBrush ImageSource="./Resources/Images/background.png"></ImageBrush>
</Grid.Background> </Grid.Background>
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="270"/> <ColumnDefinition Width="260"/>
<ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<Grid.RowDefinitions> <Grid.RowDefinitions>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 163 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 B

@ -20,11 +20,13 @@
<None Remove="Fonts\SCDream7.otf" /> <None Remove="Fonts\SCDream7.otf" />
<None Remove="Fonts\SCDream8.otf" /> <None Remove="Fonts\SCDream8.otf" />
<None Remove="Fonts\SCDream9.otf" /> <None Remove="Fonts\SCDream9.otf" />
<None Remove="Resources\Images\add_folder.png" />
<None Remove="Resources\Images\arrow_down.png" /> <None Remove="Resources\Images\arrow_down.png" />
<None Remove="Resources\Images\arrow_left.png" /> <None Remove="Resources\Images\arrow_left.png" />
<None Remove="Resources\Images\arrow_right.png" /> <None Remove="Resources\Images\arrow_right.png" />
<None Remove="Resources\Images\arrow_up.png" /> <None Remove="Resources\Images\arrow_up.png" />
<None Remove="Resources\Images\background.png" /> <None Remove="Resources\Images\background.png" />
<None Remove="Resources\Images\file_logo.png" />
<None Remove="Resources\Images\ListImage.png" /> <None Remove="Resources\Images\ListImage.png" />
<None Remove="Resources\Images\max.png" /> <None Remove="Resources\Images\max.png" />
<None Remove="Resources\Images\NIFS_logo_w.png" /> <None Remove="Resources\Images\NIFS_logo_w.png" />
@ -72,6 +74,7 @@
<Resource Include="Fonts\SCDream7.otf" /> <Resource Include="Fonts\SCDream7.otf" />
<Resource Include="Fonts\SCDream8.otf" /> <Resource Include="Fonts\SCDream8.otf" />
<Resource Include="Fonts\SCDream9.otf" /> <Resource Include="Fonts\SCDream9.otf" />
<Resource Include="Resources\Images\add_folder.png" />
<Resource Include="Resources\Images\arrow_down.png" /> <Resource Include="Resources\Images\arrow_down.png" />
<Resource Include="Resources\Images\arrow_left.png"> <Resource Include="Resources\Images\arrow_left.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory> <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
@ -81,6 +84,7 @@
</Resource> </Resource>
<Resource Include="Resources\Images\arrow_up.png" /> <Resource Include="Resources\Images\arrow_up.png" />
<Resource Include="Resources\Images\background.png" /> <Resource Include="Resources\Images\background.png" />
<Resource Include="Resources\Images\file_logo.png" />
<Resource Include="Resources\Images\ListImage.png" /> <Resource Include="Resources\Images\ListImage.png" />
<Resource Include="Resources\Images\max.png" /> <Resource Include="Resources\Images\max.png" />
<Resource Include="Resources\Images\NIFS_logo_w.png" /> <Resource Include="Resources\Images\NIFS_logo_w.png" />

@ -7,7 +7,7 @@
xmlns:vm="clr-namespace:SmartAquaViewer.ViewModel" xmlns:vm="clr-namespace:SmartAquaViewer.ViewModel"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d" mc:Ignorable="d"
d:DesignHeight="1040" d:DesignWidth="270"> d:DesignHeight="1040" d:DesignWidth="260">
<UserControl.DataContext> <UserControl.DataContext>
<vm:FileListViewModel/> <vm:FileListViewModel/>
@ -16,25 +16,38 @@
<Border Background="#264A60"> <Border Background="#264A60">
<Grid> <Grid>
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="100"/> <RowDefinition Height="80"/>
<!-- Header Row --> <!-- Header Row -->
<RowDefinition Height="*"/> <RowDefinition Height="*"/>
<!-- File List Row --> <!-- File List Row -->
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Grid> <Grid>
<Image Source="/Resources/Images/ListImage.png" <StackPanel Orientation="Horizontal" Margin="24 0 0 0">
Width="35" Margin="20 0" <Border Width="30" Height="30"
HorizontalAlignment="Left"/> HorizontalAlignment="Left"
<TextBlock Text="파일 목록" FontFamily="{StaticResource SCDream5}" Margin="0 0 12 0"
FontSize="20" FontWeight="Bold" Foreground="White" Background="#4178BE"
HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="2">
Margin="0 0 30 0"/> <Image Source="/Resources/Images/ListImage.png"
<Button Width="40" Height="40" VerticalAlignment="Center" HorizontalAlignment="Center"
Margin="20 0" Padding="0" Width="24" Height="24"/>
</Border>
<TextBlock Text="파일 목록" FontFamily="{StaticResource SCDream5}"
FontSize="24" FontWeight="Bold" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<Button Width="36" Height="36"
Margin="24 0" Padding="0"
HorizontalAlignment="Right" HorizontalAlignment="Right"
Background="#ffd663" Background="Transparent"
BorderThickness="0"
Command="{Binding OpenFileDialogCommand}"> Command="{Binding OpenFileDialogCommand}">
<materialDesign:PackIcon Kind="FolderAdd"/> <Border Background="#325C80" CornerRadius="25"
Width="36" Height="36">
<Image Source="/Resources/Images/add_folder.png"
Width="24" Height="24"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</Button> </Button>
</Grid> </Grid>
@ -54,33 +67,44 @@
</TextBlock.Style> </TextBlock.Style>
</TextBlock> </TextBlock>
<ScrollViewer Grid.Row="1" Margin="10" > <ListView
<ListView Grid.Row="1" Padding="0"
ItemsSource="{Binding FileList}" ItemsSource="{Binding FileList}"
SelectedItem="{Binding SelectedFile}" SelectedItem="{Binding SelectedFile}"
ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden"
BorderThickness="0" Background="Transparent"> BorderThickness="0">
<ListView.ItemContainerStyle> <ListView.ItemContainerStyle>
<Style TargetType="ListViewItem"> <Style TargetType="ListViewItem">
<Setter Property="Margin" Value="2"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Style.Triggers> <Setter Property="Background" Value="Transparent"/>
<Trigger Property="IsSelected" Value="True"> <Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="LightSkyBlue"/> <Setter Property="BorderThickness" Value="0"/>
</Trigger> </Style>
</Style.Triggers> </ListView.ItemContainerStyle>
</Style> <ListView.ItemTemplate>
</ListView.ItemContainerStyle> <DataTemplate>
<ListView.ItemTemplate> <Border x:Name="bdRoot" Height="56" Margin="24 0 0 0">
<DataTemplate> <StackPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal" Margin="0 5"> <Image Source="/Resources/Images/file_logo.png"
<TextBlock Text="{Binding Name}" Margin="5" Width="24" Height="24" Margin="0 0 8 0"/>
FontSize="16" FontWeight="Medium" Foreground="White" <TextBlock Text="{Binding Name}"
FontFamily="{StaticResource SCDream4}"/> FontSize="20" Foreground="White"
FontFamily="{StaticResource SCDream4}"
VerticalAlignment="Center"/>
</StackPanel> </StackPanel>
</DataTemplate> </Border>
</ListView.ItemTemplate>
</ListView> <DataTemplate.Triggers>
</ScrollViewer> <DataTrigger
Value="True"
Binding="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListViewItem}}">
<Setter TargetName="bdRoot" Property="Background" Value="#325C80"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid> </Grid>
</Border> </Border>
</UserControl> </UserControl>

@ -567,7 +567,7 @@
</Style> </Style>
</Grid.Resources> </Grid.Resources>
<StackPanel> <StackPanel>
<Grid Margin="24 24 24 8"> <Grid Margin="24 24 24 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -583,7 +583,7 @@
helper:ComboBoxHelper.SelectFirstOnItemsChange="True" helper:ComboBoxHelper.SelectFirstOnItemsChange="True"
IsEditable="False" IsTextSearchEnabled="False"/> IsEditable="False" IsTextSearchEnabled="False"/>
</Grid> </Grid>
<Grid Margin="24 0 24 8"> <Grid Margin="24 0 24 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -598,7 +598,7 @@
DisplayMemberPath="Display"/> DisplayMemberPath="Display"/>
</Grid> </Grid>
<Grid Margin="24 0 24 8" Style="{StaticResource VisibleWhenTank}"> <Grid Margin="24 0 24 10" Style="{StaticResource VisibleWhenTank}">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -682,7 +682,7 @@
<!-- LINE --> <!-- LINE -->
<StackPanel Style="{StaticResource VisibleWhenLine}"> <StackPanel Style="{StaticResource VisibleWhenLine}">
<Grid Style="{StaticResource VisibleWhenLine}" Margin="0 0 0 8"> <Grid Style="{StaticResource VisibleWhenLine}" Margin="0 0 0 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -700,7 +700,7 @@
<!--STEP--> <!--STEP-->
<StackPanel Style="{StaticResource VisibleWhenStep}"> <StackPanel Style="{StaticResource VisibleWhenStep}">
<Grid Margin="0 0 0 8"> <Grid Margin="0 0 0 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -727,7 +727,7 @@
</StackPanel> </StackPanel>
</Grid> </Grid>
<Grid Margin="0 0 0 8"> <Grid Margin="0 0 0 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -765,7 +765,7 @@
<!-- SCATTER: 단일 Y + 옵션 --> <!-- SCATTER: 단일 Y + 옵션 -->
<StackPanel Style="{StaticResource VisibleWhenScatter}"> <StackPanel Style="{StaticResource VisibleWhenScatter}">
<Grid Margin="0 0 0 8"> <Grid Margin="0 0 0 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -780,7 +780,7 @@
Style="{StaticResource ComboBoxStyle}"/> Style="{StaticResource ComboBoxStyle}"/>
</Grid> </Grid>
<Grid Margin="0 0 0 8"> <Grid Margin="0 0 0 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -799,7 +799,7 @@
<!-- BOX: 값 필드 + 그룹 필드 + 옵션 --> <!-- BOX: 값 필드 + 그룹 필드 + 옵션 -->
<StackPanel Style="{StaticResource VisibleWhenBox}"> <StackPanel Style="{StaticResource VisibleWhenBox}">
<Grid Style="{StaticResource VisibleWhenTime}" Margin="0 0 0 8"> <Grid Style="{StaticResource VisibleWhenTime}" Margin="0 0 0 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -818,7 +818,7 @@
FontSize="18" FontFamily="{StaticResource SCDream3}" Foreground="White"/> FontSize="18" FontFamily="{StaticResource SCDream3}" Foreground="White"/>
</Grid> </Grid>
<Grid Margin="0 0 0 8"> <Grid Margin="0 0 0 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>
@ -833,7 +833,7 @@
Style="{StaticResource ComboBoxStyle}"/> Style="{StaticResource ComboBoxStyle}"/>
</Grid> </Grid>
<Grid Margin="0 0 0 8"> <Grid Margin="0 0 0 10">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/> <ColumnDefinition Width="110"/>
<ColumnDefinition/> <ColumnDefinition/>

Loading…
Cancel
Save