C
C#•3mo ago
.Abdulrahman

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
.Abdulrahman
.Abdulrahman•3mo ago
Here is how it looked on android how to make it a smaller version of windows
No description
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo 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
leowest•3mo ago
leowest
leowest•3mo ago
you can look at this example
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo ago
have u tried closing the emulator and running all again
leowest
leowest•3mo ago
the above app, this is what it looks on each
No description
No description
.Abdulrahman
.Abdulrahman•3mo ago
Yup
leowest
leowest•3mo ago
so it should give u an idea on how to work it out
.Abdulrahman
.Abdulrahman•3mo ago
Perfect I'll give it a look
leowest
leowest•3mo ago
is your xaml building properly?
.Abdulrahman
.Abdulrahman•3mo ago
Yea it gives an error regarding hot reload lemme get it for you
leowest
leowest•3mo 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
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo ago
are you hosting blazor on maui?
.Abdulrahman
.Abdulrahman•3mo ago
MAUI
leowest
leowest•3mo ago
are you using a webview?
.Abdulrahman
.Abdulrahman•3mo ago
No, listview
leowest
leowest•3mo ago
where is css coming from then... im confused if you're acessing an API u wouldn't get css
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo ago
I think you're accessing the wrong api url that's why your getting swagger related files
leowest
leowest•3mo ago
wrong url
No description
leowest
leowest•3mo ago
No description
leowest
leowest•3mo ago
right url if u have "swagger" in your api urls its wrong
.Abdulrahman
.Abdulrahman•3mo ago
when I run the project it lauches browser with swagger should I turn it off ?
leowest
leowest•3mo 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
.Abdulrahman
.Abdulrahman•3mo ago
nothing in my endpoints contains swagger
leowest
leowest•3mo ago
can you show me some of the code where you do the httpclient to get the results?
leowest
leowest•3mo ago
No description
leowest
leowest•3mo ago
for example http://localhost:5213/WeatherForecast this would be my endpoint if you're looking at it from swagger
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo ago
that looks fine oh mmm could it be the authorization page?
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo 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; }
    }
.Abdulrahman
.Abdulrahman•3mo ago
Now no, but after I created the tunnel for the first time it did yes
leowest
leowest•3mo 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>
.Abdulrahman
.Abdulrahman•3mo ago
I see
leowest
leowest•3mo ago
that is just a rough example
.Abdulrahman
.Abdulrahman•3mo ago
but could be like with out the class that contain httpClient
leowest
leowest•3mo ago
wdym?
.Abdulrahman
.Abdulrahman•3mo ago
Like in the page.xaml.cs I just create objects and store them in a list without sending a request or something
leowest
leowest•3mo ago
yes you can, u already have the class above you can simple create a List<PointOfSales> and fill it with dummy data
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo 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;
.Abdulrahman
.Abdulrahman•3mo ago
Yea yours is much better😅 got it now, thank you again
leowest
leowest•3mo ago
but this error is very strange and should not be happening on MAUI, it shouldn't be sending css files to u... np
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo ago
yeah that is a very weird error to happen since its not at all related to maui but your api
leowest
leowest•3mo 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.
.Abdulrahman
.Abdulrahman•3mo 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.
.Abdulrahman
.Abdulrahman•3mo ago
but it says its not working for windows ATM
leowest
leowest•3mo 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
.Abdulrahman
.Abdulrahman•3mo 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
leowest•3mo 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
.Abdulrahman
.Abdulrahman•3mo 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.
Want results from more Discord servers?
Add your server
More Posts
Binding error Datagrid WPFHi, I'm encountering binding errors when my list is displayed, and I wanted to know how to remove th✅ how open winforms vs 2019I have a problem with VS 2019 C#, I can't open winforms after saving it, I read a couple of articlestrying to plan validating azure ad token and calling graph api in azure functionI need to validate the token generated by Azure AD in Azure Fuction. I need to use a client credenti✅ Transparent flyout itemsIn my app, my flyout items are invisible, but if I manipulate my app, change the Windows size, I canIs there a way to make an OCR model in C#?I want to make an OCR model, i got a bunch of training data but no idea if there is a reliable way oNewbie tryna learn help with Console appHey im learning and need some assistance with this little detail would do good for me✅ Updating packages in Directory.Packages.propsHow do you upgrade nugets in your Directory.Packages.props with CentralPackageTransitivePinningEnabl✅ changing server from MYSQL to SQL server (Microsoft) in visual studioi created a project on visual studio in c# community and i used MYSQL server but the guidelines for How do I use models from Project A in Project B?Lets say I have a models folder with a few models in it inside of Project A and I've created another✅ confused by this error```cs class Player(Vector2 position, Vector2 size) { public Vector2 Position { get; } = position