CODEWITHSUNDEEP
c#windows-phonewindows-store-appswindows-10
shriyanshk
shriyanshk

Reputation: 113

How to change Split View Background color dynamically in Windows 10 App

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SplitView x:Name="mySplitView" DisplayMode="CompactInline"  IsPaneOpen="False" 
                CompactPaneLength="50" OpenPaneLength="150" Content="{Binding}"> // using PaneBackground I can set color statically
            <SplitView.Pane>
                <StackPanel>
                    <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                     Width="50" Height="50" Background="Transparent" Foreground="White"  Click="HamburgerButton_Click" />
            <StackPanel>
         </SplitView.Pane>
     </SplitView>
 </Grid>

.How to change the color of Splitview Pane dynamically i.e if a user clicks button to change color to yellow it should change and if user wants default accent color then that should be set just like in outlook Mail app. I have my split view in one page and want the buttons in other xaml page namely settings page.

Upvotes: 1

Views: 2392

Answers (3)

Alan Yao - MSFT
Alan Yao - MSFT

Reputation: 3304

The following can meet your requirements:

  1. Button on setting page which is responsible for change color of split view in other pages. The new color can be saved into application's local setting.

    public sealed partial class SettingPage : Page
{
    public SettingPage()
    {
        this.InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        ApplicationDataContainer localsettings = ApplicationData.Current.LocalSettings;
        localsettings.Values["SplitViewColoronShell"] = Colors.Yellow.ToString();
    }
}

  2. In the code behind of shell page, get the color from local setting and set it to the splitview.

    protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    ApplicationDataContainer localsettings = ApplicationData.Current.LocalSettings;
    if (localsettings.Values["SplitViewColoronShell"] != null)
    {
        mySplitView.PaneBackground = GetSolidColorBrush(localsettings.Values["SplitViewColoronShell"].ToString());
    }
}

public SolidColorBrush GetSolidColorBrush(string hex)
{
    hex = hex.Replace("#", string.Empty);
    byte a = (byte)(Convert.ToUInt32(hex.Substring(0, 2), 16));
    byte r = (byte)(Convert.ToUInt32(hex.Substring(2, 2), 16));
    byte g = (byte)(Convert.ToUInt32(hex.Substring(4, 2), 16));
    byte b = (byte)(Convert.ToUInt32(hex.Substring(6, 2), 16));
    SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b));
    return myBrush;
}

Upvotes: 0

startewho
startewho

Reputation: 63

Maybe you can use the theme.

1.In the App.xmal file ,you need add two theme resource

<Application
x:Class="App3.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
RequestedTheme="Light">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush">#FFDEDEDE</SolidColorBrush>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush">Yellow</SolidColorBrush>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
</Application.Resources>
</Application>

2.Change the MainPage's code

   public MainPage()
    {
        this.InitializeComponent();
        RequestedTheme=ElementTheme.Light;
    }

    private void HamburgerButton_Click(object sender, RoutedEventArgs e)
    {
        RequestedTheme = ElementTheme.Dark;
    }

It should work in winrt.

Upvotes: 1

Nasser AlNasser
Nasser AlNasser

Reputation: 1775

You can use 'PaneBackground' property be code and use this code in each item click event handler :

mySplitView.PaneBackground = new SolidColorBrush(Colors.Yellow);

Is this what you try to do ?

Upvotes: 3

Related Questions