تعریف چند Template برای UserControl

[md3848]

سلام، من یه UserControl دارم که خب 1 دکمه داره که اگه بزنیم، UserControl فوق باید FullScreen بشه، که خب نیاز دارم یه Template برا UserControl ام تعریف کنم ( به غیر از Template پیشفرض، فلذا در کل 2 تا Template نیاز دارم که وقتی دکمه Fullscreen زده بشه بین این دوتا باید سوییچ کنم ).
( کنترل ها و رخداد های این دوتا Template هم یکی هستش، فقط موقعیت کنترلها و اندازشون متفاوته. )
چطور میتونم اینکارو بکنم؟

Template 1
Template 1.png

Template 2
Template 2.png

[Mahmoud Zaad]

سلام
یک متغیر بولین تعریف کنید که مشخص کنه فول اسکرین هست یا نه. بعد با استفاده از خاصیت های Size و Location موقعیت کنترل ها رو تنظیم کنید. اگه کاربر اجازه تغییر یوزر کنترل اصلی رو نداره و اندازه کلی ثابت هست که کار راحت تره. البته قاعدتا باید دو سری عکس یا آیکن داشته باشید که به تناسب لود بشه.
البته اگه منظور سوال چیز دیگه ای هست بفرمایید.

[md3848]

حالت ایده آل من اینه که دو تا فایل xaml داشته باشم که رابط کاربریمو توشون راحت طراحی کنم و بعد یه فایل cs داشته باشم و کنترل های موجود تو این دو تا فایل Xaml رو بر اساس نامشون دریافت کنم و بعد رخدادهاشونو تعریف کنم، یه چی تو این مایه ها.

[SajjadKhati]

سلام
اصولی تر اش اینه که style های متفاوت که template ئه متفاوت دارند تعریف کنید و از اون style ها استفاده کنید .

[md3848]

حله، ممنون

<UserControl x:Class="WpfApp4.UserControls.PlayerUC" 

            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

             xmlns:local="clr-namespace:WpfApp4.UserControls"

             mc:Ignorable="d" 

             Style="{DynamicResource UserControlStyle1}" 

             Background="Transparent"

             SizeChanged="PlayerUC_SizeChanged"

             VerticalAlignment="Stretch"

             d:DesignHeight="450" d:DesignWidth="800">





    <UserControl.Resources>

        <Style x:Key="UserControlStyle1" TargetType="{x:Type UserControl}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type UserControl}">

                        <!--template1-->

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <Style.Triggers>

                <DataTrigger Binding="{Binding FullScreen}" Value="True">

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate TargetType="{x:Type UserControl}">

                                <!--template2-->

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </DataTrigger>

            </Style.Triggers>

        </Style>

    </UserControl.Resources>





</UserControl>

کد سمت C#‎‎‎‎‎ هم برا دسترسی به کنترل ها به صورت زیر میشه :

#region Controls Object [ Private ]

private MediaElement mediaElement;





private TextBlock tbQuran;

private TextBlock tbTarjome;

#endregion





public override void OnApplyTemplate()

{

    #region Init Controls Object

    mediaElement = (MediaElement)GetTemplateChild("mediaElement");





    tbQuran = (TextBlock)GetTemplateChild("tbQuran");

    tbTarjome = (TextBlock)GetTemplateChild("tbTarjome");

    #endregion





    #region Define Controls Events

    mediaElement.MediaOpened += MediaElement_MediaOpened;

    mediaElement.MediaEnded += MediaElement_MediaEnded;

    mediaElement.MediaFailed += MediaElement_MediaFailed;

    #endregion





    base.OnApplyTemplate();

}

Untitled.jpg

توجه : راسی یه نکته ای، سعی کنید هر جا textblock یی، image یی کلا هرچیز نمایشی دارید، به کمک binding تغییر بدید، اینطوری تو template هاتون، مثلا قسمت Text رو binding استفاده میکنید و قسمت xaml تون یکسان میشه و قسمت C#‎‎ تون هم یه متغییر دارید که با تغییرش به هدفتون میرسید، امیدوارم متوجه شده باشید با این توضیح بد من.

مثلا کد سمت C#‎‎ ام میشه :

#region TextBlockQuran [ Private ]private string textBlockQuran = "";

public string TextBlockQuran

{

	get { return textBlockQuran; }

	set

	{

		textBlockQuran = value;





		NotifyPropertyChanged();

	}

}

#endregion

و کد سمت Xaml ام میشه :

<TextBlock Text="{Binding TextBlockQuran}" 		   TextWrapping="Wrap"

		   FontFamily="Scheherazade New"

		   FontSize="28"

		   Margin="10"

		   HorizontalAlignment="Center"/>

حالا برید تو دل کار و یکم کد بزنید، متوجه میشید که این روش، روش خوبیه و مشکلی تقریبا نداره.