본문 바로가기
Framework/MAUI

[MAUI] 문자열 서식 지정

by Kor-IT 2022. 9. 6.
반응형

문자열 서식 지정

 

MAUI에서 데이터 바인딩을 사용하여 개체 또는 값을 표현 시 서식을 지정하여 표현이 가능하다. 문자열 서식 지정은 일반적으로 String.Format 메서드를 사용하여 수행된다. String.Format 관련해서는 MS Docs에 잘 나와 있기 때문에 해당 링크를 공유해 두겠다. (String.Format MS Docs 링크)

 

<Slider x:Name="slider" />
<Label Text="{Binding Source={x:Reference slider},
                      Path=Value,
                      StringFormat='The slider value is {0:F2}'}" />

서식 문자열은 작은따옴표 문자로 구분되어 중괄호를 다른 태그 확장으로 처리하지 않도록 주의해야한다.

이전, Viewmodel 바인딩 소스를 응용하여 좀 더 예시를 들어보겠다.

 

반응형
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp1.Class"
             x:Class="MauiApp1.TestPage"
             Title="TestPage" Padding="20">

    <ContentPage.BindingContext>
        <local:ColorViewModel Color="Beige"></local:ColorViewModel>
    </ContentPage.BindingContext>
    
    <StackLayout>

        <BoxView HeightRequest="300" Color="{Binding Color}"></BoxView>

        <Slider x:Name="hueSlider" Value="{Binding Hue}"></Slider>
        <Label BindingContext="{x:Reference hueSlider}" Text="{Binding Value, Mode=OneWay, StringFormat='Hue {0:F2}'}" HorizontalOptions="Center"></Label>
        <Slider x:Name="luminositySlider" Value="{Binding Luminosity}"></Slider>
        <Label BindingContext="{x:Reference luminositySlider}" Text="{Binding Value, Mode=OneWay, StringFormat='Luminosity {0:F2}'}" HorizontalOptions="Center"></Label>
        <Slider x:Name="saturationSlider" Value="{Binding Saturation}"></Slider>
        <Label BindingContext="{x:Reference saturationSlider}" Text="{Binding Value, Mode=OneWay, StringFormat='Saturation {0:F2}'}" HorizontalOptions="Center"></Label>
        
    </StackLayout>
</ContentPage>

실행화면

각 Slider에 맞는 Label을 설정하여 각 슬라이드의 값을 표시하고 있다. 원하는 형식의 포멧으로 다양하게 값을 표현할 수 있다.

 

 

반응형

'Framework > MAUI' 카테고리의 다른 글

[MAUI] 바인딩 값 변환기 (IValueConverter)  (1) 2022.09.23
[MAUI] 바인딩 경로 - Path  (1) 2022.09.21
[MAUI] Viewmodel 바인딩  (1) 2022.08.24
[MAUI] 바인딩 모드  (0) 2022.08.17
[MAUI] 데이터 바인딩 기본 사항  (1) 2022.08.16

댓글