Skip to content

Commit

Permalink
Styling changes
Browse files Browse the repository at this point in the history 
> want to try have it styled even better but im new to this. was tryna use bootstrap lol
  • Loading branch information
@Abdi-Suufi
Abdi-Suufi committed Jun 16, 2024
1 parent 76e225f commit 626b59c
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 108 deletions.
Binary file modified Assets/images/background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Assets/images/background1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
142 changes: 43 additions & 99 deletions MainWindow.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
xmlns:local="clr-namespace:WeatherApp"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="Weather App"
Width="1000"
Height="700"
Width="790"
Height="650"
mc:Ignorable="d">

<Window.Resources>
Expand All @@ -28,6 +28,8 @@

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
Expand All @@ -51,9 +53,8 @@
Name="WeatherIcon"
Grid.Row="0"
Grid.Column="1"
Width="100"
Height="100"
Margin="523,21,177,19" />
Margin="523,21,125,19" />

<Label
Name="LocationLabel"
Expand All @@ -65,106 +66,49 @@
Margin="300,0,300,10"
HorizontalContentAlignment="Center"
FontWeight="Bold"
Foreground="White" />
Foreground="black" />

<!-- New section for hourly weather updates -->
<Grid
<!-- Title for hourly weather updates -->
<Label
Grid.Row="2"
Grid.ColumnSpan="3"
Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Slider
Name="HourlySlider"
Margin="10"
IsSnapToTickEnabled="True"
Maximum="23"
Minimum="0"
TickFrequency="1"
ValueChanged="HourlySlider_ValueChanged" />

<DataGrid
Name="HourlyDataGrid"
Grid.Row="1"
Margin="10"
AlternatingRowBackground="LightGray"
AutoGenerateColumns="False"
ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}"
GridLinesVisibility="All"
HeadersVisibility="Column">

<DataGrid.Columns>
<DataGridTextColumn
Width="*"
Binding="{Binding Time}"
ElementStyle="{StaticResource DataGridCellTextStyle}"
Header="Time" />
<DataGridTextColumn
Width="*"
Binding="{Binding Temperature}"
ElementStyle="{StaticResource DataGridCellTextStyle}"
Header="Temperature" />
<DataGridTextColumn
Width="*"
Binding="{Binding Description}"
ElementStyle="{StaticResource DataGridCellTextStyle}"
Header="Description" />
<DataGridTemplateColumn Width="Auto" Header="Icon">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image
Width="50"
Height="50"
Source="{Binding IconUrl}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0,10,0,10"
HorizontalAlignment="Center"
Content="Hourly Update"
FontSize="20"
FontWeight="Bold"
Foreground="black" />

<DataGrid
Name="ForecastDataGrid"
<!-- Section for hourly weather updates -->
<ScrollViewer
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="3"
Margin="20"
AlternatingRowBackground="LightGray"
AutoGenerateColumns="False"
ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}"
GridLinesVisibility="All"
HeadersVisibility="Column">
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<StackPanel Name="HourlyWeatherPanel" Orientation="Horizontal" />
</ScrollViewer>

<!-- Title for forecast -->
<Label
Name="ForecastTitleLabel"
Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0,10,0,10"
HorizontalAlignment="Center"
FontSize="20"
FontWeight="Bold"
Foreground="black" />

<DataGrid.Columns>
<DataGridTextColumn
Width="*"
Binding="{Binding DateTime}"
ElementStyle="{StaticResource DataGridCellTextStyle}"
Header="DateTime" />
<DataGridTextColumn
Width="*"
Binding="{Binding Temperature}"
ElementStyle="{StaticResource DataGridCellTextStyle}"
Header="Temperature" />
<DataGridTextColumn
Width="*"
Binding="{Binding Description}"
ElementStyle="{StaticResource DataGridCellTextStyle}"
Header="Description" />
<DataGridTemplateColumn Width="Auto" Header="Icon">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image
Width="50"
Height="50"
Source="{Binding IconUrl}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<!-- Section for forecast weather updates -->
<ScrollViewer
Grid.Row="5"
Grid.ColumnSpan="3"
Height="150"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<StackPanel Name="ForecastWeatherPanel" Orientation="Horizontal" />
</ScrollViewer>
</Grid>
</Window>
115 changes: 106 additions & 9 deletions MainWindow.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Threading;
using Newtonsoft.Json.Linq;
Expand All @@ -19,6 +20,7 @@ public partial class MainWindow : Window
private const string GeoIpUrl = "http://ip-api.com/json/";
private DispatcherTimer weatherTimer;
private List<HourlyForecast> hourlyForecasts = new List<HourlyForecast>();
private List<WeatherForecast> dailyForecasts = new List<WeatherForecast>();

public MainWindow()
{
Expand All @@ -45,7 +47,7 @@ private async Task FetchWeatherData()
}

// Update the location label with the fetched city name
LocationLabel.Content = $"Location: {location.Item3}";
LocationLabel.Content = $"{location.Item3}";

string weatherUrl = $"{BaseUrl}?key={ApiKey}&q={location.Item3}&aqi=yes";
string weatherData = await GetWeatherData(weatherUrl);
Expand All @@ -69,6 +71,9 @@ private async Task FetchWeatherData()
{
MessageBox.Show("Error fetching weather forecast data.");
}

// Set the forecast title
ForecastTitleLabel.Content = $"7 Day Forecast";
}

private async Task<(double, double, string)> GetLocation()
Expand Down Expand Up @@ -128,8 +133,8 @@ private void DisplayWeather(string weatherData)
private void DisplayForecast(string forecastData)
{
JObject forecastJson = JObject.Parse(forecastData);
dailyForecasts.Clear();
var forecastList = forecastJson["forecast"]["forecastday"];
var forecastTable = new List<WeatherForecast>();

foreach (var forecast in forecastList)
{
Expand All @@ -139,7 +144,7 @@ private void DisplayForecast(string forecastData)
string iconCode = forecast["day"]["condition"]["icon"].ToString();
string iconUrl = $"{IconBaseUrl}{iconCode}";

forecastTable.Add(new WeatherForecast
dailyForecasts.Add(new WeatherForecast
{
DateTime = dateTime,
Temperature = $"{temp} °C",
Expand All @@ -148,7 +153,7 @@ private void DisplayForecast(string forecastData)
});
}

ForecastDataGrid.ItemsSource = forecastTable;
UpdateForecastWeatherPanel();
}

private void DisplayHourlyForecast(string forecastData)
Expand All @@ -174,15 +179,107 @@ private void DisplayHourlyForecast(string forecastData)
});
}

HourlyDataGrid.ItemsSource = new List<HourlyForecast> { hourlyForecasts[0] };
UpdateHourlyWeatherPanel();
}

private void UpdateHourlyWeatherPanel()
{
HourlyWeatherPanel.Children.Clear();
foreach (var forecast in hourlyForecasts)
{
var card = new Border
{
Width = 100,
Margin = new Thickness(5),
Background = new SolidColorBrush(Colors.LightGray),
CornerRadius = new CornerRadius(10),
Child = new StackPanel
{
Orientation = Orientation.Vertical,
Children =
{
new TextBlock
{
Text = forecast.Time,
FontSize = 16,
FontWeight = FontWeights.Bold,
TextAlignment = TextAlignment.Center,
Margin = new Thickness(2)
},
new TextBlock
{
Text = forecast.Temperature,
FontSize = 20,
FontWeight = FontWeights.Bold,
TextAlignment = TextAlignment.Center
},
new Image
{
Source = new BitmapImage(new Uri(forecast.IconUrl)),
Width = 50,
Height = 50,
Margin = new Thickness(0, 5, 0, 5)
},
new TextBlock
{
Text = forecast.Description,
FontSize = 11,
TextAlignment = TextAlignment.Center,
}
}
}
};
HourlyWeatherPanel.Children.Add(card);
}
}

private void HourlySlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
private void UpdateForecastWeatherPanel()
{
int index = (int)e.NewValue;
if (index >= 0 && index < hourlyForecasts.Count)
ForecastWeatherPanel.Children.Clear();
foreach (var forecast in dailyForecasts)
{
HourlyDataGrid.ItemsSource = new List<HourlyForecast> { hourlyForecasts[index] };
var card = new Border
{
Width = 100,
Margin = new Thickness(5),
Background = new SolidColorBrush(Colors.LightGray),
CornerRadius = new CornerRadius(10),
Child = new StackPanel
{
Orientation = Orientation.Vertical,
Children =
{
new TextBlock
{
Text = forecast.DateTime,
FontSize = 16,
FontWeight = FontWeights.Bold,
TextAlignment = TextAlignment.Center
},
new TextBlock
{
Text = forecast.Temperature,
FontSize = 20,
FontWeight = FontWeights.Bold,
TextAlignment = TextAlignment.Center
},
new Image
{
Source = new BitmapImage(new Uri(forecast.IconUrl)),
Width = 50,
Height = 50,
Margin = new Thickness(0, 5, 0, 5)
},
new TextBlock
{
Text = forecast.Description,
FontSize = 12,
TextAlignment = TextAlignment.Center
}
}
}
};
ForecastWeatherPanel.Children.Add(card);
}
}

Expand Down
2 changes: 2 additions & 0 deletions WeatherApp.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

<ItemGroup>
<None Remove="Assets\images\background.jpg" />
<None Remove="Assets\images\background1.jpg" />
</ItemGroup>

<ItemGroup>
Expand All @@ -23,6 +24,7 @@
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
<Resource Include="assets\images\background.jpg" />
<Resource Include="assets\images\app_icon.ico" />
<Resource Include="Assets\images\background1.jpg" />
</ItemGroup>

</Project>

0 comments on commit 626b59c

Please sign in to comment.