Posts

Ten Steps to Mastering the Fetch API

Image
For redactor:  How To... | Upload images (imperavi.com)

How To Limit Lines Of Text With CSS Only

Image

Simplify your CSS with these 3 grid layout solutions

Image

CSS Tips: min-content, max-content, fit-content - intrinsic sizing with CSS

Image
For the part of max-content: For the full layout:

Learn CSS Grid the easy way

Image

The .NET 8 Auth Changes You Must Know About!

Image
This is a test for embedding videos. Here's a video on  .Net 8 security simplification:

Handy queries and features for Sql Server geography data from OSM

 I'm using SQL for a lot of work on geographic data and here I wanted to share a few of the "not-so-obious" snippets I use when working with OpenStreetMap (OSM) data. When providing data to be parsed as Latitude and Longitude We can use the STRING_AGG function. select w.Id, STRING_AGG( cast(n.Lat as nvarchar(max)) + ' ' + cast(n.Lon as nvarchar(max)), ', ') within group (order by wn.NodeOrder) as LatLon from Way w inner join WayNode wn on wn.WayId = w.Id inner join Node n on n.Id = wn.NodeId group by w.Id This example is based on my working OSM data model (way - waynode -node etc.) The list above will provide a clean list of "lat lon, lat lon ...". But when I need for instancce WKT it can ve altered by switching the "n.Lat" and "n.Lon" above.   Of couse one can use the built-in functions such as: select w.shape.STAsText() as wkt, w.Shape.AsGml() as gml from.... Firstly, I used the agg function to make the sql g...

Start template for Xaml MapControl

Image
 The Xaml.MapControl comes with a nice example that sow different options. This can be found in the examples directory at  https://github.com/ClemensFischer/XAML-Map-Control . This post is meant to show a more simple solution. And my hope is that I can use this as a start template. The goal is to end up with this view: And this is the steps to get this going: Create new project and setup  Create a new project in Visual Studio. When writing this I selected the tradistional .Net Framework 4.8. Then I installed the Map Control by the package manager console:      PM> Install-Package XAML.MapControl For this template I didn't use any MVVM Frameworks. This is to make less depentant on third-party solutions. I used the base MVVM template I wrote aboute in:  Absolute Mini MVVM .  Copy those two classes to the folder explained below.   Then I made the following folders in Visual Studio: Models Views ViewModels AbsoluteMiniMvvm Extensions For thi...

Using Bing Maps as source for "Xaml MapControl"

In "XAML MapControl" you can also get the map tiles from Bing. You need an API key. This can pe obtained from this site: https://www.bingmapsportal.com/ Building on the example from this blog post: " Minimal Example ", The XAML markup will be: <map:Map x:Name="MainMap" Center="59.9,10.7" ZoomLevel="4"> <map:BingMapsTileLayer Mode="AerialWithLabels" /> </map:Map> But the API key has to be inserted somewhere i code before the map is displayed. The place for this is dependant of your project; For a MVVM project it may be set in the initilization of the ViewModel (if you are using "model-first"). For a more basic tutorial scenario it may be set in the App.Startup or the initialization of the first form. The code is either way:           using MapControl;           public MyViewModel() // or whatever initializes { BingMapsTileLayer.ApiKey = "YOUR-M...

Absolute minimal MVVM

Since I have plans for showing some examples using WPF with MVVM, I thought it would be a good idea to post the code for a very basic MVVM template. This is so I don't have to rely on some advanced frameworks. And this way the examples can focus on the issue at hand. The files may be placed in a library and referenced by several projects, or they may be copied inside the project itself. The first class to be used is the base for handling INotifyPropertyChanged in the ViewModels and models: using System.ComponentModel; using System.Runtime.CompilerServices; namespace AbsoluteMiniMvvm { public class PropertyChangedBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } } The second is for the Command: namespace AbsoluteMiniMvvm { public class Command : ICommand { ...

Minimal example for "Xaml MapControl"

Image
I have mentioned the map control named "Xaml.MapControl" by Clemes Fischer on this blog earlier. This is a very good map control for use in WPF applications and some of the main features are: It can get tiles from many sources such as "Open Street Map", "Bing Maps" and custom sorces by using a url format string. It can also have WMS layers on from different sources, and you may also add your own tile sources or images. You can display UI elements on the map. The mapp add Points, Lines, Elipses and Polygons but you may add xaml-elements yourself to be displayed on your map.  XAML and MVVM support.  Using ItemsControls for multiple elements. Since it is meant to be used in MVVM and XAML it is very flexible. You can provide data for the map by using WPF binding. You can style it with WPF templates and styles. And adjust data by using WPF converters. I wanted to write this post to show the most simple and basic way to get a map in a WPF application. And this i...

Custom Pushpin in Bing Maps Control for WPF

Image
Pushpins in "Bing Maps Control for WPF" can be styled in XAML. The code below may seem a bit much, but this is actually very flexible and easy to adjust. And it doesn't require code-behind that is forgotten when copying, problems with change of names that isn't reflected in code or overriding rendering events. It also get additional benefits at a later stage since this can also contain text( see below ) be data-bound, bound to other controls or templates or be rotated and transformed. We could also control size or placement according to converters related to real-world sizes like meters or have it's visbility set according to zoom-level. This is out of scope here but I will try to get to that later. In the example below the styles are placed inside the map-control in <m:Map.Resources> . This is handy when designing or for a cut-copy-paste library. But this get quite a bit readable when it's moved into an Application.Resource in App.Xaml or in it...

Remove default Bing Map Layer from the WPF-MapControl

Image
When providing your own tiles to the Map Control in WPF you would want to remove the default map being served by Bing behind your own source. This is the "full" XAML block from one of my example projects: <m:Map Center="48.03,-122.4" Name="MyMap" CredentialsProvider="YOUR-BINGMAP-KEY" ZoomLevel="10"> <m:Map.Mode> <!-- set empty map mode to remove default map layer --> <m:MercatorMode /> </m:Map.Mode> <!-- Included for completeness, but to be replaced by yor own code or wait for a post about this -->     <!-- <local:MyTileLayer x:Name="WebMapLayer" UriFormat="{Binding SelectedTileProvider.UriFormat}"> <m:MapItemsControl ItemsSource="{Binding Places}"> <ItemsControl.ItemTemplate> <DataTemplate> <m:PushPin ...

Bing Maps Control for WPF with Essential Tools

There are alternatives, but the basic Bing Maps for WPF has a lot of resources and a strong documentation available. Microsoft has moved the focus to the UWP-version and the WEB-version, but for desktop applications that requires local file operations this is still the basic tool. I have been using " XAML Map Control " by Clemens Ficher a lot. But since that control is modelled after the features of "BingMaps"the toolkits below will still be relevant. To get started we should get the bing-map-key from Microsoft here: https://www.bingmapsportal.com/ First off there is the Control itself. It can be found on Nuget: PM> Install-Package Microsoft.Maps.MapControl.WPF Then I add the Spatial Toolbox ( see below ). This is not on Nuget, so you have to download it , unpack it, and then include it to your project. You can add a reference to the toolbox project to your solution (Located in the archive folders, and named: Microsoft.Maps.SpatialToolbox.Core and Micros...

Styling code in Blogger posts

On this plattform (Blogger) I wanted to style the code blocks. I found one javascript formatter called highlight.js, and it can be found on this link: https://highlightjs.org/ . To implement this I had to go to the admin-part. Select the menu [Themes], and under the selected theme it is a button named [Edit Html]. And in the window with the hml-code I paste in the following in the <head> section: <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/> <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles//vs.min.css' rel='stylesheet'/> <script>hljs.initHighlightingOnLoad();</script> In line 2 you can change vs.min.css with other styles like github.min.css or the darker vs2015.min.css or ocean.min.css . This will apply style to all the <pre><code>//nnnn</code></pre> . For this blog theme I have added an override style in [themes] [Cu...

Tip to enable key-events in WPF

Working on a project with editing shapes I came over a problem when I wanted to canced the operation when the user pressed the escape-key. When I added an event handler for KeyPress or KeyDown or even PreviewKeyDown it never fired. This was because the graphical elements didn't actully have focus. For my user-control for the graphic element I solved this by adding this in the constructor: this.Focusable = true; this.FocusVisualStyle = null; The second line ensured that the dotted focus-rectangle also disseapeared. For a xaml-based approach this is the markup: <Canvas Focusable="True" FocusVisualStyle="{x:Null}">  <!-- The shapes or elements like an elipse, rectangle, path or stack-panel... --> </Canvas>

Welcome

Image
Welcome to my ramblings on the web. This blog is planned to contain some useful tips on the projects I'm working on. This is currently things related to SQL, .Net, C#, WPF, Bing Maps, XAML Maps, Geography functions, some 3D woks in .net and Unity. It is meant to be a reposityory to find back when I have wandered off on my many side-tracks. If this is interesting for other too I will just regard that as a non-intended positive side-effect. Photo by Andrew Neel on Unsplash