UWP en W10 y W10M ¿Color personalizado en la barra de titulo?

Tema en 'Desarrollo' iniciado por Sam Aberto, 22 Nov 2016.

Etiquetas:
  1. Sam Aberto

    Sam Aberto Insider

    11
    5
    211
    Tengo un par de dudas sobre las UWP que por aun no conocer lo suficiente se me hace difícil buscarlo.

    - Como aplico un color personalizado a la barra de titulo??

    La segunda duda es sobre las notificaciones...
    Mi aplicación es un cliente no oficial de una web y emita sus peticiones Ajax para recibir los datos.
    Estos datos provienen de un WebView con mis scripts de peticiones... el detonador de las notificaciones de la web también vienen del WebView por lo que la pregunta es:

    - Es posible tener de escucha a un WebView en un proceso de segundo plano para desencadenar una notificación?

    y mi ultima duda es mas simple...
    Esta web es como un twitter, pero mas barato y antes de que terminen de cargar las imágenes en la aplicación se visualiza un ProgressRing por cada imagen, el problema esta en que solo por tener unos cuantos activos ya me elevan el consumo de CPU a mas del 30% o consumen mucho o no se desactivan correctamente :/

    PD: La optimización de la UWP de Twitter es de otro mundo, consume 0% de CPU cuando no usas el Scroll.
    Pd2: Creen que si subo la app a medias a la tienda a pesar de solo esta disponible por link, me la acepten?
    Pd3: Perdonen si tengo falta de ortografía es que soy un desastre!

    Agrego una foto!
    [​IMG]
     
    Última edición: 22 Nov 2016
  2. Elías

    Elías Insider Principiante

    7
    1
    234
    Todo esto en C# (ignora las comillas)
    - Primero que nada, abres "Mainpage.xaml.cs" (o el nombre de tu página inicial)
    - Añade (si es que no lo tienes ya): "using Windows.UI;"
    - Luego, después de tu "public Mainpage() {........}" pegas esto (ahí lo formateas correctamente)

    private void SetBackgroundTitleBar()
      {
         var appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
         var titleBar = appView.TitleBar;
         titleBar.BackgroundColor = Colors.DodgerBlue; // color de toda la barra
         titleBar.ForegroundColor = Colors.White; // color del texto del titulo
         titleBar.ButtonBackgroundColor = Colors.DodgerBlue; // color de los botones de la barra
         titleBar.ButtonForegroundColor = Colors.White; // color del texto de los botones
         titleBar.InactiveBackgroundColor = Colors.DodgerBlue; // color de la barra cuando no esta seleccionada (inactiva)
         titleBar.InactiveForegroundColor = Colors.White; // color del texto del titulo inactivo
         titleBar.ButtonInactiveBackgroundColor = Colors.DodgerBlue; // color de los botones inactivos
         titleBar.ButtonInactiveForegroundColor = Colors.White; // color del texto de los botones inactivos
      }  


    - Luego, dentro de el "public Mainpage() {........}" debajo de el "this.InitializeComponent()" pones "SetBackgroundTitleBar();" de modo que queda:

    using Windows.UI;
    
    namespace NombreDeLaApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SetBackgroundTitleBar();
            }
    
            private void SetBackgroundTitleBar()
            {
                var appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
                var titleBar = appView.TitleBar;
                titleBar.BackgroundColor = Colors.DodgerBlue; // color de toda la barra
                titleBar.ForegroundColor = Colors.White; // color del texto del titulo
                titleBar.ButtonBackgroundColor = Colors.DodgerBlue; // color de los botones de la barra
                titleBar.ButtonForegroundColor = Colors.White; // color del texto de los botones
                titleBar.InactiveBackgroundColor = Colors.DodgerBlue; // color de la barra cuando no esta seleccionada (inactiva)
                titleBar.InactiveForegroundColor = Colors.White; // color del texto del titulo inactivo
                titleBar.ButtonInactiveBackgroundColor = Colors.DodgerBlue; // color de los botones inactivos
                titleBar.ButtonInactiveForegroundColor = Colors.White; // color del texto de los botones inactivos
           } 
       }
    }


    Por lo que veo de la app, podrías probar con el color que dejé puesto (DodgerBlue), CornFlowerBlue, RoyalBlue, LightSkyBlue o SteelBlue.

    En caso de que ninguno de esos colores te convencen, cambia el "Colors.DodgerBlue;" por "Color.FromArgb(a, r, g, b);" donde "a" es el porcentaje de opacidad del color (dejar de preferencia en 100), "r" la cantidad de rojo, "g" la de verde y "b" la de azul (hasta el 255). En el selector de colores de la vista XAML de tu proyecto, aparecen los colores (solo que en orden RGBA, en lugar de ARGB) así que puedes usar el mismo de tu botón hamburguer, reemplazando las letras del ejemplo por los valores que deseas. Recuerda reemplazar en el orden correcto "ARGB"

    De preferencia, si el color de la barra de título es lo suficientemente oscura, dejar los "Foreground" en blanco.

    Y con eso deberías tener la barra de título en PC del color deseado (en mobile es mas fácil).
     
  3. Sam Aberto

    Sam Aberto Insider

    11
    5
    211
    Gracias Elías y supongo que el resto de mis dudas tendré que ir experimentando con la documentación jeje.
    Saludos!
     
  4. Antoniodelaiglesia

    Antoniodelaiglesia Microsoft Insider

    2.547
    1.640
    680
    No te olvides de la barra en smartphones. Tienes que agregar la referencia a Windows Mobile Extensions For UWP (No creo que tengas problema para hacerlo, si lo tienes di y te digo los pasos más detallados)

    upload_2016-11-22_21-53-10.png ´

    Y luego deberás comprobar si está la API presente (Cosa que no pasará en PC) y hacer el cambio a la barra:

    if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
    
          {
              Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundColor = ((SolidColorBrush)App.Current.Resources["ElementContrastColor"]).Color;
            Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundOpacity = 1;
            Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ForegroundColor = Colors.White;
          }


    También puedes hacer esto mismo poniéndole un background a la Page que cubra la ventana o colocando elementos por encima del x = 0 de la página que contiene la ventana.

    Sobre el resto de dudas, abre hilos nuevos, estarán mejor ordenadas por si alguien quiere buscarlas. No olvides citarme escribiendo @Adelaiglesia para que me entere.
     
    A andreche le gusta esto.
  5. Sam Aberto

    Sam Aberto Insider

    11
    5
    211
    Gracias @Antoniodelaiglesia ya lo he agregado pero fuera de eso tengo mas problemas, tal ves puedas iluminarme para solucionarlo.
    Hace una semanas prepare un appxupload para ver si todo estaba bien y así fue pero el día de hoy he intentado hacerlo nuevamente pero me surgió este error de APIs además de otros que ya he solucionado.
    [​IMG]
    Lo único que se me ocurre es que sea debido al paquete de NuGet llamado Microsoft.Toolkit.Uwp.Notifications pero no estoy seguro.
    --- Doble mensaje combinado, 29 Nov 2016 , fecha del mensaje original: 28 Nov 2016 ---
    Parece que esta todo el proyecto corrompido, copiare archivo por archivo de la solución a una nueva y dudo que el problema persista.
    Saludos!
     
  6. CristianGarcia

    CristianGarcia Insider

    17
    0
    86
    Ejemlo :
    private void UIOrange_Checked(object sender, RoutedEventArgs e)
    {
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.BackgroundColor = Color.FromArgb(A,R,G,B);

    }



    [​IMG]
    Y para mobiles Solo en la debes Poner un background

    <Page x:Name="page"
    x:Class="App_Universal.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App_Universal"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Background="#FF0177D7" Loaded="Page_Loaded">
     

    Adjuntos:

Cargando...