If you've ever wondered, hey, how do I
pick a folder with .NET MAUI? Then this video is for you. I have told you on many occasions how
amazing the .NET MAUI Community Toolkit is. And
not just because I'm involved with contributing to it. In fact, I love it
so much that there is a dedicated playlist
which should pop up on your screen right now, or find it
down below that you can watch with all kinds of videos about the .NET
MAUI Community Toolkit. In this video, we're going to talk about the FolderPicker
that was recently added at the time this video was recorded. So with the
FolderPicker, you can basically go out, spawn a little dialog on each
platform: Windows, iOS, Android, macOS, Tizen. And that
allows you to pick a folder. So not a file.
We have the FilePicker already in .NET MAUI. But that allows you to pick
files, right? But sometimes you need to pick a folder. So in this
video, we're going to explore the folder picker in the .NET MAUI
Community Toolkit. Let's hop over to Visual Studio. Here in Visual Studio 2022, I
just created a File, New .NET MAUI project. You can
find the code in my GitHub repository. All my videos have a GitHub repository
attached, so find it down below in the video description. And the
first thing that we want to do, you've seen me do it many times, but I'm just
going to do it one more time, is install the .NET MAUI Community
Toolkit. Go to our Solution Explorer, right click on the project, do Manage
NuGet Packages, and then on the browse tab, make sure to search for
CommunityToolkit.Maui. And whenever the search stops
loading, we can now find the CommunityToolkit.
Maui. And we got a couple more. We got the Core package, we got
the Markup package, which does amazing things. We have the MediaElement now,
which is crazy, crazy cool. But we just want to stick with
CommunityToolkit.Maui. So let's install that version 4.0.0 at the time of
recording. So you probably want to make sure to have at least that
version. And whenever we do, we get this little README that's going
to help us. And the thing that you want to remember from this, or
probably want to copy and paste from this is this UseMauiCommunityToolkit() line.
I'm going to copy that and go over to my MauiProgram.cs.
So let's go to the Solution Explorer, MauiProgram.cs and go paste that line in here in my App
Builder. Now there might be other stuff in here for your real
world application, but just make sure that it's somewhere hooked
up to your builder variable instance right here. So UseMauiCommunityToolkit
and that will add this using CommunityToolkit.Maui; here at
the top. Make sure that you have that and everything is wired now to use the
Community Toolkit features. So let's go over to the MainPage.xaml.
I'm just going to add a little thing right here. So I already have a couple of labels. Let's
add actually this label. I'm going to add
an x:Name here so I can reference it from the code behind. And
I'm going to name this folderPath. So the "Hello, World" is going to be
replaced with whatever I pick as a folder. And then in the MainPage.xaml.cs, I'm going to implement some code. So
I'm just going to remove this counter button, click
stuff actually and remove this count
variable just to clean it up here a little bit. And what I can now say is
FolderPicker and you will have to import the right
using for this. So let's wait for IntelliSense to help us click on the light bulb
using CommunityToolkit.Maui. Storage;. So let's just pop that in
there. You can also type that yourself here and it will help. And then you can do
FolderPicker. And we got a couple of options. We have the
Default so that's the default instance. This kind of mimics the APIs that are
inside of .NET MAUI directly with the FilePicker and the
Geolocation and MediaPicker and all that kind of stuff. You
have like the default instance that you can go out to. Or we just have
this static method of PickAsync so with this default and it implements IFolderPicker interface as well.
So you can also register it for dependency injection. So you can
use it like that as well. But I'm just going to use the static
instance for now. So you have options here depending on what you want and
need in your application. So let's just do the PickAsync and then also
you got a couple of overloads. So we have the cancellation
token and with the cancellation token, if you don't know what that is
actually maybe I should make a video about it. Let me know if that's something
that is of interest to you. You can kind of like cancel the operation
programmatically, right? So maybe you have a timeout, I don't know, seems kind of
funny, but maybe you have a timeout in which the user has to pick a folder
and if 10 seconds have passed, then you want to cancel the
folder picker dialog. So you just create a new cancellation
token, do cancellation token cancel or something like that
and the folder picker will disappear again automatically. So
that's all stuff that you can do with this cancellation token. And
we have an overload for the initial path. Now the initial path
is not implemented for each platform. I think right now it's only
implemented for macOS, iOS and Tizen, which kind of like
opens the dialog with the initial path, right? I think
at least for Windows it's not really possible to have an
initial path, at least not a custom one. You have a
couple of predefined one on Windows. So I'm not sure, maybe
we're going to change something here a little bit. But at least for now, be aware
that this might not always work on every platform else. You can plot a
path in here and the FolderPicker will open with
that path already shown. Now in any case, it
will return a Folder object which has a couple of things. We'll
see that in a little bit. And I'm going to go with the
cancellation token one and I'm not really going to use
the cancellation token, so I'll just put default in here which basically does
new cancellation token and I'm not really going to use it anyway. var folder =... This and I probably want to make this async and then await this so
that we do the async/await stuff. And then I
have the folderPath.Text = folder.Name. Sounds good. Let's see
what this folder actually does. Right? Because this is the Folder
object. So what does it have more? It has a Name. It also has a Path. So that
probably gets you the full path. So this might be
only the name. So actually maybe we want to do a
little string format here and we want to do folder.Name. Let's just get it all in here. And we also want to have... So let's add the name in here and then we want to do path. There we go. And then we can do
folder.Path. We can see that as well. Does the
Folder have anything other useful things? I think so. There's also the
Deconstruct. So that's kind of like you will get the path and the
name as two separate things. You can do that with this method to
deconstruct and you get the path in the out variable and the
name as well. It's probably useful in some scenarios for you, but right now
this should be enough. There is one other thing that is good
to know, that is whenever the user cancels this dialog, it will throw
an exception. So you have to put this in a try/atch
block. Well, you don't have to. I'm not here
to tell you what you should do, but you probably want to, right?
Because if it's going to be an unhandled exception, it's going to crash your
application, which is probably not what you want. So here we have the try and then
whenever the user cancels or they somehow pick a
folder that doesn't exist anymore or anything happens, you can
do a little validation here in the Catch. I'm not going to do anything
but // Todo Implement. That's how we fix these things, right?
// Todo Implement. So we got that all in place and now I can
actually start running the application. And when I press the button, it will
bring up the Windows picker dialog and it will allow me to pick a folder.
So I'm going to click here and it's going to show me. It's going
to open on my C: drive and I can pick this Program Files one. So
select folder and you can see it updates name Program
Files, right? So that's just the name of the folder that we picked. And the
full path is then going to be C:\Program Files and I can click again
and I can go into this Intel folder and I can select
folder. And I think the Windows folder dialog, maybe other platforms do as
well. They kind of like remember where you were, right? So you have this Intel
and it remembers now that path. So that's kind of like how that
works. And if I would run the same thing on Android and iOS and
Tizen and all those things, I would get a
dialog that allows me to pick a folder as well. So that is how easy it
is to pick a folder. Now in .NET MAUI with the .NET MAUI
Community Toolkit. So of course this is just showing you how to pick
the folder. Now from here you can, I don't know, show all the files that
are in that folder. But of course, if the OS allows for
it, right? Because on Windows, the access to the file system
is pretty straightforward and you can now just go and iterate over all
the files there on Android or iOS, it might not be that simple.
Also, at least for Android, I know that you have to add
permissions for if you want to access the external storage. I put that in
the code in the GitHub repository. And of course there's also documentation for
the folder picker as well. So go check out those links down in the
video description below. Thank you again for watching one of my videos. And please
don't forget to like it so that it will spread out to more
people. I would very much appreciate that. Thank you so much. Subscribe to my
channel if you haven't done so already. And before you go check out this
playlist. Maybe you have some more time and check out more
.NET MAUI videos or check out this playlist for videos specific to the
.NET MAUI Community Toolkit. See you for the next one.
