Topics

C#•8mo ago

Need help with MAUI's XAML Pages

Hey guys! so I have created MAUI page but I used to run it only on windows. and it look good enough for my expectations But when I run it on Android I thought it would be responsive and shrink to fit android screen but instead something weird just appeared 😅.

No description

56 Replies

.AbdulrahmanOP•8mo ago

Here is how it looked on android how to make it a smaller version of windows

No description

.AbdulrahmanOP•8mo ago

Here is my code, I am new to MAUI and bad in front end developing so excuse me if you see a lot of strange things in the code 😅.

message.txt

leowest•8mo ago

Android and windows are 2 complete different experience for UI My advice is make pages specific for windows and pages specific to Android Otherwise u will have to write all your XAML taking into consideration resizing and it would need to be able to morph as it reaches say tablet size , mobile size etc

leowest•8mo ago

https://github.com/dotnet/maui-samples/tree/main/8.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne

GitHub

maui-samples/8.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne at main...

Samples for .NET Multi-Platform App UI (.NET MAUI) - dotnet/maui-samples

leowest•8mo ago

you can look at this example

.AbdulrahmanOP•8mo ago

Got it I have another problem suddenly hot reload stopped working when I created new MAUI project it works on it, but the one that contain the pages above it doesn't work on it

leowest•8mo ago

have u tried closing the emulator and running all again

leowest•8mo ago

the above app, this is what it looks on each

No description

No description

.AbdulrahmanOP•8mo ago

Yup

leowest•8mo ago

so it should give u an idea on how to work it out

.AbdulrahmanOP•8mo ago

Perfect I'll give it a look

leowest•8mo ago

is your xaml building properly?

.AbdulrahmanOP•8mo ago

Yea it gives an error regarding hot reload lemme get it for you

leowest•8mo ago

then I dont know sorry, hot reload only stops working for me if I do some complex xaml modification it can't follow up and after restarting the build it works again if there is an error that might help

.AbdulrahmanOP•8mo ago

it says CSS Hot Reload ignoring https://mk6lhkhk-7219.inc1.devtunnels.ms/swagger/swagger-ui.css because it was inaccessible or had more than 5000 rules. is it related?

leowest•8mo ago

are you hosting blazor on maui?

.AbdulrahmanOP•8mo ago

MAUI

leowest•8mo ago

are you using a webview?

.AbdulrahmanOP•8mo ago

No, listview

leowest•8mo ago

where is css coming from then... im confused if you're acessing an API u wouldn't get css

.AbdulrahmanOP•8mo ago

If i want to test Listview without getting data using api, should I create like a model view then create objects of the model and store them in a list ? cause when I created another MAUI project the hot reload is working there and I want to use it to start building the android page

leowest•8mo ago

I think you're accessing the wrong api url that's why your getting swagger related files

leowest•8mo ago

wrong url

leowest•8mo ago

leowest•8mo ago

right url if u have "swagger" in your api urls its wrong

.AbdulrahmanOP•8mo ago

when I run the project it lauches browser with swagger should I turn it off ?

leowest•8mo ago

those page are just for you to via and test the api there is nothing wrong with that, that is just so u can visualize and test your api it also provides u with all the endpoints

.AbdulrahmanOP•8mo ago

nothing in my endpoints contains swagger

leowest•8mo ago

can you show me some of the code where you do the httpclient to get the results?

leowest•8mo ago

No description

leowest•8mo ago

for example http://localhost:5213/WeatherForecast this would be my endpoint if you're looking at it from swagger

.AbdulrahmanOP•8mo ago

c#

_baseAddress = DeviceInfo.Platform == DevicePlatform.Android ? "https://mk6lhkhk-7219.inc1.devtunnels.ms" : "https://mk6lhkhk-7219.inc1.devtunnels.ms";


_url = $"{_baseAddress}/api";


            string requestUrl = $"{_url}/SalesOffice/offices-with-property-counts";

c#

_baseAddress = DeviceInfo.Platform == DevicePlatform.Android ? "https://mk6lhkhk-7219.inc1.devtunnels.ms" : "https://mk6lhkhk-7219.inc1.devtunnels.ms";


_url = $"{_baseAddress}/api";


            string requestUrl = $"{_url}/SalesOffice/offices-with-property-counts";

I used _baseAddress this way before I use dev tunnels that why it exists

leowest•8mo ago

that looks fine oh mmm could it be the authorization page?

.AbdulrahmanOP•8mo ago

I dont have an authorization page yet I guess I will just code the page in the project that has hot reload working after finishing I'll copy paste it in my project Thank you for you help, much appreciated 🙏🏾

leowest•8mo ago

if u access https://mk6lhkhk-7219.inc1.devtunnels.ms in your browser does it pop something asking if u wantto continue but either way to answer your relevant question the API will give u json you would deserialize that JSON insto a class i.e.:

public class PointOfSales
{
    //with the structure it has here
}

public class PointOfSales
{
    //with the structure it has here
}

so you can certainly use that to populate your listview without relying on the api for testing

    public class PointOfSales
    {
        [JsonPropertyName("sO_ID")]
        public int Id { get; set; }

        [JsonPropertyName("sO_Name")]
        public string Name { get; set; }

        [JsonPropertyName("address_ID")]
        public int AddressId { get; set; }

        [JsonPropertyName("emp_ID")]
        public int EmpId { get; set; }

        [JsonPropertyName("manager_name")]
        public string? ManagerName { get; set; }

        [JsonPropertyName("numOfProperties")]
        public int NumOfProperties { get; set; }
    }

    public class PointOfSales
    {
        [JsonPropertyName("sO_ID")]
        public int Id { get; set; }

        [JsonPropertyName("sO_Name")]
        public string Name { get; set; }

        [JsonPropertyName("address_ID")]
        public int AddressId { get; set; }

        [JsonPropertyName("emp_ID")]
        public int EmpId { get; set; }

        [JsonPropertyName("manager_name")]
        public string? ManagerName { get; set; }

        [JsonPropertyName("numOfProperties")]
        public int NumOfProperties { get; set; }
    }

.AbdulrahmanOP•8mo ago

Now no, but after I created the tunnel for the first time it did yes

leowest•8mo ago

var result = await _httpClient.GetFromJsonAsync<List<PointOfSales>>(endpoint).ConfigureAwait(false);

var result = await _httpClient.GetFromJsonAsync<List<PointOfSales>>(endpoint).ConfigureAwait(false);

so result would be a List<PointOfSales>

.AbdulrahmanOP•8mo ago

I see

leowest•8mo ago

that is just a rough example

.AbdulrahmanOP•8mo ago

but could be like with out the class that contain httpClient

leowest•8mo ago

wdym?

.AbdulrahmanOP•8mo ago

Like in the page.xaml.cs I just create objects and store them in a list without sending a request or something

leowest•8mo ago

yes you can, u already have the class above you can simple create a List<PointOfSales> and fill it with dummy data

.AbdulrahmanOP•8mo ago

so it would be pointOfSales p = new PointOfSale (2, fdsfds, 2, 2, fdsf,) List<PointOfSales> p = new List<PointOfSales> List<PointOfSales>.add(p) then do Listview.ItemSource = p is this right?

leowest•8mo ago

u cannot use p like that but yes something like that

var points = new List<PointOfSales>
{
    new PointOfSales(2, "asdasd", 2, 2, "asdasd"),
    new PointOfSales(2, "asdasd", 2, 2, "asdasd"),
    new PointOfSales(2, "asdasd", 2, 2, "asdasd"),
    new PointOfSales(2, "asdasd", 2, 2, "asdasd"),
};
Items = points;

var points = new List<PointOfSales>
{
    new PointOfSales(2, "asdasd", 2, 2, "asdasd"),
    new PointOfSales(2, "asdasd", 2, 2, "asdasd"),
    new PointOfSales(2, "asdasd", 2, 2, "asdasd"),
    new PointOfSales(2, "asdasd", 2, 2, "asdasd"),
};
Items = points;

.AbdulrahmanOP•8mo ago

Yea yours is much better😅 got it now, thank you again

leowest•8mo ago

but this error is very strange and should not be happening on MAUI, it shouldn't be sending css files to u... np

.AbdulrahmanOP•8mo ago

idk, everytime I want to develop a MAUI page I just remeber that hot reload is not working and just stall. been a nightmare .. BTW do you have any suggestions on authenticating users using google?

leowest•8mo ago

yeah that is a very weird error to happen since its not at all related to maui but your api

leowest•8mo ago

https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/communication/authentication?view=net-maui-8.0&tabs=android

Web Authenticator - .NET MAUI

Learn how to use the .NET MAUI IWebAuthenticator interface, which lets you start browser-based authentication flows, which listen for a callback to the app.

.AbdulrahmanOP•8mo ago

I found this: https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/communication/authentication?view=net-maui-8.0&tabs=windows

Web Authenticator - .NET MAUI

Learn how to use the .NET MAUI IWebAuthenticator interface, which lets you start browser-based authentication flows, which listen for a callback to the app.

.AbdulrahmanOP•8mo ago

but it says its not working for windows ATM

leowest•8mo ago

where? I never tried it on windows I only use MAUI for android and iOS ah I see but it says right under how to do it thou if that does not work then u would have to do it differently on windows then u would on mobile by starting a browser or something when it gives u the redirection url oauth is pretty confusing if its your first time doing it, I would worry about it when u get there

.AbdulrahmanOP•8mo ago

It is my first time .. and it already got my anxiety level very high 😅 Felt a little proud of my self after doing MAUI and webAPI then after doing a little search on how google authenticating works and seeing how complicated it is, feels sad.

leowest•8mo ago

its easy once u get it, but yes its complex because it uses your api as a callback, to reach out to google to get a url that ur app will launch for the use to safely auth to their page which then redirects back to your api with tokens and what not that u then need to redirect back into your app

.AbdulrahmanOP•8mo ago

Turned out this error is not related to the MAUI project. I ran the webAPI alone without the MAUI project and it gave the error.

We are a programming server aimed at coders discussing everything related to C# (CSharp) and .NET.

54KMembers

View on Discord

Want results from more Discord servers?

Add your server