Merhaba

Bu yazımızda Xamarin.Forms 3.0 ile gelen Visual State Manager’ı (VSM) örneklerle anlamaya çalışacağız. VSM genel anlamda durumlara göre görsel değişiklikler yapmamıza imkan sağlayan bir yöntem/yaklaşımdır. Bu durumlar ise; Normal, Disabled, Focused, Selected

VSM özelliğinden önce bu tarz durumları Effect veya CustomRenderer ile yapmaya çalışıyorduk. Sizlerin de bildiği gibi Xamarin.Forms her gelen minor veya major güncellemelerde artık bu tarz ihtiyaçlarımızı Shared katmanda yapma imkanını bizlere sunuyor. VisualStateManager sınıfı içerisindeki CommonStates sınıfı bize bu kullanımları sunuyor.

        public class CommonStates
        {
            public const string Normal = "Normal";
            public const string Disabled = "Disabled";
            public const string Focused = "Focused";
            public const string Selected = "Selected";

            public CommonStates();
        }

Küçük bir örnek ile başlayacak olursak..

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Visual State Manager" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Entry Placeholder="Visual State Manager">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="White" />
                            <Setter Property="PlaceholderColor" Value="Black" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Black" />
                            <Setter Property="PlaceholderColor" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Entry>
    </StackLayout>

Kullandığımız kontrolün tüm özelliklerini VSM içerisinde kullanabiliyoruz. Yaptığımız örnekte VisualStateGroups içerisindeki Normal ve Focused özelliklerini kullanarak Entry kontrolünün kullanım durumlarına göre görünümünü değiştirmiş olduk.

VSM’dan önce nasıl yapıyorduk? Bu sorunun birden fazla cevabı var fakat hiç platform spesifik işlem yapmak istemeyenler için en kolay yol kullandığımız kontrolün eventlerini kullanmak.

        <Entry Placeholder="Without Visual State Manager"
               PlaceholderColor="Black"
               Focused="Entry_Focused"
               Unfocused="Entry_Unfocused"/>

        private void Entry_Focused(object sender, FocusEventArgs e)
        {
            var entry = (Entry)sender;
            entry.Background = Brush.Black;
            entry.PlaceholderColor = Color.White;
        }

        private void Entry_Unfocused(object sender, FocusEventArgs e)
        {
            var entry = (Entry)sender;
            entry.Background = Brush.White;
            entry.PlaceholderColor = Color.Black;
        }

Bu tarz örnekleri çoğaltabileceğimiz gibi tüm kontroller için VSM
VisualElement yapısını kullanabilirsiniz.

Peki ihtiyacımız sayfa içerisindeki tüm Entry kontrolleri için olsaydı 🙂 VSM’ı Resource içerisinde de kullanabiliyoruz.

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Entry">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="White" />
                                    <Setter Property="PlaceholderColor" Value="Black" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Focused">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Black" />
                                    <Setter Property="PlaceholderColor" Value="White" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

VisualElement CommonStates dışında Button visual states, CheckBox visual states, CarouselView visual states, ImageButton visual states, RadioButton visual states ve Switch visual states kullanımları var.

Button Visual State ek olarak pressed özelliğine sahip olduğunu görüyoruz.

        <Button Text="Visual State Manager Button">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale" Value="1" />
                            <Setter Property="BackgroundColor" Value="Black" />
                            <Setter Property="TextColor" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale" Value="0.8" />
                            <Setter Property="BackgroundColor" Value="White" />
                            <Setter Property="TextColor" Value="Black" />
                        </VisualState.Setters>
                    </VisualState>

                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>

Keyifli kodlamalar 🙂

Kaynak-1 : https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager

Kaynak-2 : https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager#visual-states-in-xamarinforms